Angular Material步进线性验证无法按预期工作

Posted 2023-02-08

我正在尝试使用单一形式使用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>

知道我哪里错了吗？

提前致谢！

答案

线条：

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

希望能帮助到你。