Question

我正在尝试通过一种形式使用Angular Material Stepper。在进行下一步之前，我使用线性触发了验证。但是它似乎没有按预期工作。

我正在创建如下的反应形式。

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');
}

希望有帮助。

角材料步进线性验证未按预期工作

1 个答案: