Angular 7 如何手动触发mat-error？

Question

我有一个要验证的控件：

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Title " required [formControl]="titleFormControl">
    <mat-error *ngIf="titleFormControl.hasError('required')">
      Title is <strong>required</strong>
    </mat-error>
    <mat-error *ngIf="titleFormControl.hasError('duplicate')">
      Name already used
    </mat-error>
  </mat-form-field>

在组件中我有类似的东西

titleFormControl = new FormControl('', {
    validators: [
      Validators.required,
      Validators.minLength(4)
    ],
  });

  ngOnInit(): void {
      this.titleFormControl.valueChanges
  .pipe(distinctUntilChanged()).subscribe(this.isNameDuplicate.bind(this))
  }

 isNameDuplicate(): void {
    const ret = this.data.findIndex((item, index) =>
      index !== this.selSheetIndex && item.id >= 0 && this.titleFormControl.value === item.title) >= 0;
    if (ret) {
      this.titleFormControl.setErrors({ 'duplicate': true });
      this.titleFormControl.markAsDirty(); // doesn't help neither :-/
    }
  }

如果我更改文本，如果缺少标题，mat-error 会立即显示。当我更改内容时 isNameDuplicate() 导致错误控件出现错误 'duplicate'

我希望立即显示 mat-error，但不知何故这不是真的。 mat-error 的评估（对于 'duplicate'）只有在我改变焦点时才会触发，例如换到另一个领域。（同时立即显示 'required'）

有没有办法手动触发评估，以便立即显示 'duplicate' 错误 mat-error？

注意：我知道我可以使用错误匹配器来做到这一点，但坦率地说我不知道如何对给定列表应用检查。因此，我正在寻找这种方法的解决方案。

Answer 1

将您的验证器替换为 formControl 的异步验证器，而不是 ngOnInit

titleFormControl = new FormControl('', [
      Validators.required,
      Validators.minLength(4),
      this.isNameDuplicate.bind(this)
    ]
  );

 isNameDuplicate: ValidatorFn = (control: FormControl): {[s: string]: boolean} {
    const ret = this.data.findIndex((item, index) =>
    index !== this.selSheetIndex && item.id >= 0 && control.value === item.title) >= 0;
    return ret ? {duplicate: true} : {};
  }

Answer 2

试试这个 (ValidatorFn)：

titleFormControl = new FormControl('', {
validators: [
  Validators.required,
  Validators.minLength(4),
  this.isNameDuplicate.bind(this) // <----- Custom validator method call
],
});


 isNameDuplicate(control: AbstractControl): { [key: string]: boolean } | null {
 const ret = this.data.findIndex((item, index) => index !== this.selSheetIndex && item.id >= 0 && this.titleFormControl.value === item.title) >= 0;
 if (ret) {
  return { duplicate: true };
 }
}

在html

 <mat-error *ngIf="titleFormControl.hasError('duplicate')">
  Name already used
</mat-error>

Angular 7 如何手动触发mat-error？

Angular 7 How to trigger mat-error manually?

angular-material2

angular-validation

angular