Angular Material 2 matHorizo​​ntalStepper表单验证

Question

我正在使用Angular Material 5.2.4的matHorizo​​ntalStepper和Angular 4/5。线性模式已开启。 在步骤1中，我有一个表格，其中包含两个输入。 但是步进器检查是否只填充了一个必需的输入。对于步进者而言，用户只填充了一个必填字段并让用户进入第2步。

这就是我所说的https://angular-ugvs4m.stackblitz.io

我可以设置步进器来验证所有必需的输入是否已填满？

Answer 1

我分叉你的stackblitz应用程序并修复你的错误。 Live example

您的错误对[stepControl]，[formGroup]以及formControlName（firstName和lastName）的两个输入使用了相同的控件。

您需要在示例中创建父formGroup（firstFormGroup），然后在其中创建两个FormControl（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>