Линейная проверка шагового углового материала не работает должным образом

Question

Я пытаюсь использовать Angular Material Stepper, используя одну форму.Я использовал linear для запуска проверки перед переходом к следующему шагу.Но, похоже, он работает не так, как ожидалось.

Я создаю свою реактивную форму, как показано ниже.

ngOnInit() {

    this.newDataRequestForm = new FormGroup({
      'firstFormGroup': new FormGroup({
        'firstCtrl': new FormControl('', [Validators.required, Validators.minLength(8)]),
        'secondCtrl': new FormControl('', Validators.required)
      }),
      'secondFormGroup': new FormGroup({
        'secondCtrl': new FormControl('', Validators.required)
      })
    });

  }

А мой HTML ниже.

<form [formGroup]="newDataRequestForm" (ngSubmit)="submit()">
    <mat-horizontal-stepper linear #stepper>
        <mat-step [stepControl]="firstFormGroup">
            <div formGroupName="firstFormGroup">
                <mat-grid-list cols="12" rowHeight="1:1">
                    <mat-grid-tile colspan="3"></mat-grid-tile>
                    <mat-grid-tile colspan="3">
                        <mat-form-field appearance="outline">
                            <mat-label>MY ID</mat-label>
                            <input matInput  formControlName="firstCtrl" >
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="3" >
            <mat-form-field appearance="outline" >
              <mat-label>MY Name</mat-label>
              <input matInput  formControlName="secondCtrl" >
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </div>
      <button type="button" mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup">
      <div formGroupName="secondFormGroup">
        <ng-template matStepLabel>Fill out your address</ng-template>
        <mat-form-field>
          <input matInput placeholder="Address" formControlName="secondCtrl" required>
        </mat-form-field>
        <div>
          <button type="button" mat-button matStepperPrevious>Back</button>
          <button type="button" mat-button matStepperNext>Next</button>
        </div>
      </div>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      You are now done.
      <div>
        <button type="button" mat-button matStepperPrevious>Back</button>
        <button type="submit" mat-button>Submit</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

Есть идеи, где я ошибаюсь?

спасибо заранее!

Answer 1

Строки:

<mat-step [stepControl]="firstFormGroup">

и

<mat-step [stepControl]="secondFormGroup">

- это привязки ввода к свойствам с именами firstFormGroup и secondFormGroup, ни для одной из которых вы не упомянули или не отобразили реализацию.

Имея это в виду, я считаю, что ваша проблема в том, что нет FormGroups с этими именами в вашем компоненте , вместо этого они скрыты внутри newDataRequestForm.

Чтобы исправить это, определите следующее в вашем компоненте:

get firstFormGroup(): FormGroup {
    return this.newDataRequestForm.get('firstFormGroup');
}

get secondFormGroup(): FormGroup {
    return this.newDataRequestForm.get('secondFormGroup');
}

Надеюсь, это поможет.