Angular Material 2 matHorizo​​ntalStepper表单验证 [英] Angular Material 2 matHorizontalStepper form validation

问题描述

我正在使用Angular Material 5.2.4和Angular 4/5中的matHorizo​​ntalStepper.线性模式已打开. 在第1步中，我有一个带有两个必需输入的表格. 但是步进器会检查是否仅填充了一个必需的输入.对于步进器，用户只填写一个必填字段，然后让用户进行第2步就足够了.

I am using matHorizontalStepper from Angular Material 5.2.4 with Angular 4/5. Linear mode is on. On step 1 I have a form with two inputs which are required. But stepper checks if only one required input is filled. It's enough for stepper that user filled only one required field and let the user go for the step 2.

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

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

What can I set stepper to validate if all required inputs are filled ?

推荐答案

我派生了您的stackblitz应用并修复了您的错误. 在线示例

I forked your stackblitz app and fixed your error. Live example

您的错误是对[stepControl]，[formGroup]以及带有formControlName的两个输入(名字和姓氏)使用相同的控件.

Your error was using the same control for the [stepControl], [formGroup] and for both inputs with formControlName (firstName and lastName).

您需要创建一个父formGroup(在示例中为firstFormGroup)，然后在其中创建两个FormControl(firstName和lastName).其余的只是将其直接连接到html中.

You need to create a parent formGroup (firstFormGroup in your example), and then two FormControls inside it (firstName and lastName). The rest is just connecting it right in the html.

还要注意，我从所有<input>元素中删除了required.如果您使用的是模板驱动的表单，则无需插入html元素.

Also notice that I removed required from all the <input> elements. If you are using template driven forms, you do not need to put in on the html elements.

固定组件文件

  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>

这篇关于Angular Material 2 matHorizo​​ntalStepper表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！