当输入无效时，角度反应形式+材料输入在第一个焦点上不显示红色边框答案

【问题标题】：Angular reactive form + material input don't show red border on first focus when input is not valide当输入无效时，角度反应形式+材料输入在第一个焦点上不显示红色边框
【发布时间】：2021-07-01 13:09:09
【问题描述】：

我有一个带有自定义验证器的子组件输入的 Angular 反应式表单。

我有一个奇怪的行为：

当我第一次选择输入时，我输入了使字段无效的值，我没有看到红色边框，但我看到表单控件无效。仅当我不聚焦该字段时，边框才会改变颜色。然后，当我返回并更新值时，我会在每个字符更改时对输入的文本进行“实时”UI 验证。

export class FormFieldErrorExample {
  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    if (this.email.hasError('required')) {
      return 'You must enter a value';
    }

    return this.email.hasError('email') ? 'Not a valid email' : '';
  }
}

HTML

<div class="example-container">
  <mat-form-field appearance="fill">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="pat@example.com" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>

电子邮件中official angular material site 中的示例

我需要的是从第一个焦点开始更改输入验证样式。

【问题讨论】：

标签： javascript angular angular-material angular-reactive-forms

【解决方案1】：

我找到了解决方案，当我动态构建表单时，我已将属性markAllAsTouched() 添加到 formGroup 中。

现在，当我第一次输入错误值时，我会直接获得带有红色边框的输入，而无需取消焦点以查看我的文本是否有效。

我不知道这是否是最好的解决方案。我仍然对其他愿景感兴趣

【讨论】：