Angular:在下一个滴答上运行代码的最佳方式是什么？

Question

我正在写输入(mat-input)的模糊处理程序，如果表单有效，它会操纵DOM。我想确保此时验证错误消失了，这就是我将代码包装在 setTimeout 中的原因。在下一个滴答上运行它？

有没有一种好的 Angular 方法可以在下一个滴答上运行一些代码？

Answer 1

Example of a input that shows and hides error message on blur Stack Blitz

问题 :有没有一种好的 Angular 方法可以在下一个滴答上运行一些代码？

答案 : 是的!使用 Angular 表单控件来管理表单状态。 Angular 自动更新。

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  input = new FormControl('', {
    validators: [Validators.required, Validators.minLength(3)],
    updateOn: 'blur'
  });

  getErrorMessage() {
    return this.input.hasError('required') ? 'You must enter a value' :
      this.input.hasError('minlength') ? 'Minimum length is 3 characters' :
        '';
  }
}



<mat-card class="searchbox">
<mat-form-field>
    <input matInput  placeholder="Enter three of more characters" [formControl]="input" required>
    <mat-error *ngIf="input.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<button mat-stroked-button>GO</button>