title: Navigate to particular component only after filling required input fields
body: <p>I have components called <code>demo</code>, demo component have 3 input fields and an button.Like this:</p>
  
  <p><a href="https://i.stack.imgur.com/110Hv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/110Hv.png" alt="enter image description here"></a></p>
  
  <p>After clicking button(i,e submit) i am navigating to another component called <code>home</code>.This scenario is working fine for me, But i have added some validation for <strong>first/last-name</strong> and <strong>email</strong>.</p>
  
  <p>If the user enters all the required input fields then only  it as to navigate to another component (i,e home).<strong>But it is navigating without entering/validating the required input fields.</strong></p>
  
  <p>While surfing i got some examples:</p>
  
  <p>1) <a href="https://stackoverflow.com/questions/41332343/angular-2-navigate-to-a-different-page-on-login">Example 1</a><br>
  2) <a href="https://angular.io/guide/forms" rel="nofollow noreferrer">Example 2</a></p>
  
  <p>But these are for <code>template-driven forms</code>. I am using reactive forms.</p>
  
  <p>Here is the <a href="https://stackblitz.com/edit/angular-material2-issue-jbbmi8?file=app/demo/demo.component.html" rel="nofollow noreferrer">Stakcblitz DEMO</a>.</p>