title: Angular Material Stepper Component For Each Step
body: <p>I have a <code>angular material linear stepper</code> each step is a separate <code>angular component</code> containing a <code>form</code> which needs <code>validation</code></p>
  
  <p>The validation simply just isn't working. I can progress through to the next step without completing the form. </p>
  
  <p>To illustrate what I mean I have created a condensed version on stackblitz.  </p>
  
  <p>The main things to look at (I think) is the <code>create-profile.component.html</code></p>
  
  <pre><code>&lt;mat-horizontal-stepper linear #stepper&gt;
      &lt;mat-step [stepControl]="frmStepOne"&gt;
          &lt;ng-template matStepLabel&gt;Step One Details&lt;/ng-template&gt;
          &lt;step-one-component&gt;&lt;/step-one-component&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]="frmStepTwo"&gt;
          &lt;ng-template matStepLabel&gt;Step Two Details&lt;/ng-template&gt;
          &lt;step-two-component&gt;&lt;/step-two-component&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]="frmStepThree"&gt;
          &lt;ng-template matStepLabel&gt;Step Three Details&lt;/ng-template&gt;
          &lt;step-three-component&gt;&lt;/step-three-component&gt;
      &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>And each <code>step-X-component</code> </p>
  
  <p>Here is the stackblitz. 
  <a href="https://stackblitz.com/edit/angular-vpoj5j" rel="noreferrer">https://stackblitz.com/edit/angular-vpoj5j</a></p>