时间戳

首页 > 解决方案 > 如何在 Angular 中一段时间​​后在 mat-input 上设置错误？

javascript - 如何在 Angular 中一段时间​​后在 mat-input 上设置错误？

问题描述

延迟一段时间后，我需要在输入字段上显示验证错误。到目前为止，我有这个代码。

html

<form  [formGroup]="myGroup">
  <mat-form-field>
    <mat-label>Age</mat-label>
    <input matInput formControlName="age" placeholder="0">
  </mat-form-field>

  <span class="error" *ngIf="myGroup.get('age').hasError('maxlength')">age should be max 2 digits.</span>
</form>

打字稿

myGroup: FormGroup;

constructor () {
this.myGroup = new FormGroup({
    age: new FormControl(null, {
    validators: [Validators.maxLength(2)]
    }),
 });
}

我需要在 1 秒键入结束后显示验证消息。怎么做。

标签： javascriptangulartypescriptvalidationangular-reactive-forms

解决方案

在您的情况下，您不必使用控制验证器机制。您可以创建一个完全控制自己的替代方案。每个控件都公开了一个valueChanges可观察对象，您可以利用和使用.RxJS debounceTime

  myGroup: FormGroup;

  constructor () {
    this.myGroup = new FormGroup({
      age: new FormControl(null)
    });
  }

  ngOnInit() {
    const age = this.myGroup.get('age');
    if (age) {
      age.valueChanges.pipe(
            debounceTime(1000)
        ).subscribe(() => age.setErrors(Validators.maxLength(2)(age)))
    }
  }

我从这篇很棒的媒体文章中找到了上面的代码。

在这里找到工作演示。

推荐阅读