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

Question

我有一个带有自定义验证器的子组件输入的Angular Reactive Form。

我有一个奇怪的行为：

当我第一次选择一个输入，然后输入使字段无效的值时，我没有得到红色边框，但我看到表单控件无效。只有当我取消聚焦字段时，边框才会改变颜色。然后当我回到它并更新值时；活的"；每次字符更改时输入文本的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="[e-mail]" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>

在电子邮件的官方角度材料网站上的一个例子

我需要的是从第一个焦点开始改变输入验证风格。

Answer 1

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

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

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