插值在 mat-form-field 内因 mat-error 无法正常工作答案

【问题标题】：Interpolation not working properly inside mat-form-field for mat-error插值在 mat-form-field 内因 mat-error 无法正常工作
【发布时间】：2020-02-23 00:22:54
【问题描述】：

我正在使用角度材料中的自定义验证来验证用户名以下是我的代码

 <mat-form-field>
          <input id="Username" required name="Username" [(ngModel)]="employee.Username" type="text" matInput
            #Username="ngModel" (focusout)="ValidateUsername($event.target.value)" placeholder="Username">
            <mat-error *ngIf="isNotValidUsername">Username already exist</mat-error>
          <mat-error *ngIf="Username.errors?.required && Username.touched">Required</mat-error>
        </mat-form-field>

问题是“用户名已存在”错误未显示。如果我在 mat-form-field 之外编写此错误行代码，那么它可以工作。而且，如果触发了必需的错误，那么它也会显示“用户名已存在”错误。但它单独在 mat-form-field 标签内不起作用。我做错了什么？怎么显示？

【问题讨论】：

请提供您的验证码！
ValidateUsername(username) { this.employeeService.ValidateUsername(username).subscribe((res:boolean) => { this.isNotValidUsername = res; }) }
当您调试代码时，会调用 ValidateUsername 函数吗？
是的，它调用并将其响应保存在“this.isNotValidUsername”变量中。当我将“”标签放在 mat-form-field 标签之外时，它会显示错误。否则它不可见。

标签： angular-material customvalidator

【解决方案1】：

如果控件有效，mat-error 不会显示错误。您可以使用错误状态匹配器为输入设置无效状态。以下帖子包括它是如何在密码验证表单组中实现的。

https://stackblitz.com/angular/brleoyyorkap?file=app%2Finput-error-state-matcher-example.ts

【讨论】：