Угловой материал 2 мат

Я разветвил ваше приложение stackblitz и исправил вашу ошибку. Живой пример

Ваша ошибка заключалась в использовании одного и того же элемента управления для [stepControl], [formGroup] и для обоих входов с formControlName (firstName и lastName).

Вам нужно создать родительскую группу formGroup (firstFormGroup в вашем примере), а затем два FormControls внутри нее (firstName и lastName). Остальное просто подключает прямо в html.

Также обратите внимание, что я удалил required из всех элементов <input>. Если вы используете формы на основе шаблонов, вам не нужно добавлять элементы html.

файл фиксированного компонента

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      address: ['', Validators.required],
    });
  }

исправленный шаблон html

<mat-horizontal-stepper [linear] = "true" #stepper = "matHorizontalStepper">
  <mat-step [stepControl] = "firstFormGroup">
    <form [formGroup] = "firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder = "First name"  formControlName = "firstName">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder = "Last name" formControlName = "lastName" >
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl] = "secondFormGroup">
    <form [formGroup] = "secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder = "Address" formControlName = "address" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click) = "stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>