javascript - 使用 Angular Material 步进器在输入类型文本中添加自定义验证

Question

我正在使用 Angular 步进器来显示所有数据并为某些文本框获取输入，但我想在用户单击“下一步”按钮时添加自定义验证。

stackblitz - material-stepper-custom-validation

html:

<mat-horizontal-stepper #stepper>
  <mat-step>
    <div class="m-10">
      <input type="text" id="fname" placeholder="First Name" >
      </div>
      <div class="m-10">
      <input type="text" id="lname" placeholder="Last Name" >
      </div>
      <div>
        <button mat-button (click)="checkData()" matStepperNext>Next</button>
      </div>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>      
  </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>

此处，在进入下一个步进器之前应验证名字和姓氏，但不使用 formGroup。

ts:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
  selector: 'stepper-optional-example',
  templateUrl: 'stepper-optional-example.html',
  styleUrls: ['stepper-optional-example.css']
})
export class StepperOptionalExample implements OnInit {

  constructor() {}

  ngOnInit() { }

  checkData() {    
    let lname = (<HTMLInputElement>document.getElementById("fname")).value;
    if(lname == '') {
      alert('error');
    }
    return false;
  }
}

如何？ - 如果名字为空，则不允许他们进入下一步步进器。

Answer 1

因为您使用模板驱动方法，所以您需要以某种方式将所有输入字段映射到 ngModel 中。这是一个示例:

HTML:

<input type="text" required [(ngModel)]="model.name" name="name">

TS:

@Component({
  selector: 'stepper-optional-example',
  templateUrl: 'stepper-optional-example.html',
  styleUrls: ['stepper-optional-example.css']
})
export class StepperOptionalExample implements OnInit {

  @ViewChild('stepper') stepper;

  model = {
    name: 'Initial Value'
  }

  constructor() {}

  ngOnInit() { }

}

然后您可以使用它来检查 onClick 属性。您需要删除 matStepperNext 并添加 (click) 事件监听器，如下所示:

HTML:

<button mat-button (click)="onNext()">Next</button>

TS:

onNext() {
  // Validate your value in the function
  if (this.model.name !== 'Henry') {
    this.stepper.next();
  }
}

除此之外，我还建议您查看官方指南，了解如何实现模板驱动方法:https://angular.io/guide/forms