title: mat-stepper every step in component
body: <p>I would like to implement a mat-stepper, every step is in a different component, my problem is to prevent the next button is clicked if the step is not completed:</p>
  
  <pre><code>parent.html:
  &lt;mat-horizontal-stepper&gt;
    &lt;mat-step [stepControl]="stepOneForm [completed]="stepOneForm?.valid"&gt;
      &lt;ng-template matStepLabel&gt;Step1&lt;/ng-template&gt;
      &lt;child-step-1 
         [stepOne]="stepOneForm"
         (stepOneEmitter)="updateStepOne($event)"&gt;
      &lt;/child-step-1 &gt;
    &lt;/mat-step&gt;
    &lt;mat-step [stepControl]="stepTwoForm [completed]="stepTwoForm?.valid"&gt;
      &lt;ng-template matStepLabel&gt;Step2/ng-template&gt;
      &lt;child-step-2 
         [stepTwo]="stepTwoForm"
         (stepTwoEmitter)="updateStepTwo($event)"&gt;
      &lt;/child-step-2 &gt;
    &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  
  parent.ts:
  stepOneForm: FormGroup;
  stepTwoForm: FormGroup;
   //////////
  updateStepOne(step: FormGroup) {
      this.stepOneForm = step;
  }
  
  updateStepTwo(step: FormGroup) {
     this.stepTwoForm = step;
  }
  
  child-1.html
  &lt;form [formGroup]="stepOne" (change)="updateStepOne()"&gt;
     &lt;mat-form-field&gt;
      &lt;input matInput required type="text" formControlName="title"/&gt;
     &lt;/mat-form-field&gt;
     &lt;button mat-button matStepperNext&gt;&lt;mat-icon&gt;arrow_forward&lt;/mat-icon&gt;&lt;/button&gt;
  &lt;/form&gt;
  child-1.ts
  this.stepOne = this.fb.group({
    title: ['Default title', [
      Validators.required
    ]]
  });
  
  updateStepOne() {
    this.stepOneEmitter.emit(this.stepOne);
  }
  </code></pre>
  
  <p>Everything works but the stepControl, it is possible to go to next step even when the form is not valid.</p>
  
  <p>Where is my mistake?</p>