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

问题描述

我正在使用来自 Angular Material 5.2.4 的 matHorizo​​ntalStepper 和 Angular 4/5.线性模式开启.在第 1 步，我有一个包含两个必需输入的表单.但是步进器检查是否只填充了一个必需的输入.对于 stepper 来说，用户只填写一个必填字段并让用户进行第 2 步就足够了.

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

如果所有必需的输入都已填写，我可以设置步进器来验证什么?

解决方案

我分叉了您的 stackblitz 应用程序并修复了您的错误.实例

您的错误是对 [stepControl]、[formGroup] 和带有 formControlName(firstName 和 lastName)的两个输入使用相同的控件).

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

另请注意，我从所有 元素中删除了 required.如果您使用模板驱动的表单，则不需要放入 html 元素.

固定组件文件

 ngOnInit() {this.firstFormGroup = this._formBuilder.group({名字:[''，Validators.required]，姓氏:[''，Validators.required]});this.secondFormGroup = this._formBuilder.group({地址:['', Validators.required],});}

固定的html模板

<mat-h​​orizo​​ntal-stepper [linear]="true" #stepper="matHorizo​​ntalStepper"><mat-step [stepControl]="firstFormGroup"><form [formGroup]="firstFormGroup"><ng-template matStepLabel>填写你的名字</ng-template><mat-form-field><input matInput placeholder="名字" 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>

</表单></mat-step><mat-step [stepControl]="secondFormGroup"><form [formGroup]="secondFormGroup"><ng-template matStepLabel>填写您的地址</ng-template><mat-form-field><input matInput placeholder="Address" formControlName="address" required></mat-form-field><div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>

</表单></mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button><button mat-button (click)="stepper.reset()">重置</button>

</mat-step></mat-h​​orizo​​ntal-stepper>

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.

Here's what I'm talking about https://angular-ugvs4m.stackblitz.io

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

解决方案

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

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

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.

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.

fixed component file

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      address: ['', Validators.required],
    });
  }

fixed html template

<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屋！