angular - mat-form-field 总是显示所需的红色？

Question

有什么方法可以在 required="true" 时始终显示 mat-form-field 的红色，即使我从未设置专注于它还是我触摸它？

<mat-form-field color="accent">
  <input matInput placeholder="ID is required" required="true [(ngModel)]="uniqueID">
</mat-form-field>

我只想显示错误的红色，但从一开始，在我触摸输入之前。

这怎么可能？

Answer 1

如果您愿意使用响应式表单...使用 ngAfterViewInit ，您可以以编程方式将字段标记为已触摸以强制错误。

• 不幸的是，我不熟悉如何通过模板驱动的表单。

  setTimeout(() => {
          this.yourForm.controls['yourControl'].markAsTouched();
        }, 0);
  

修订

基于我原来的回答，以及 Abhishek 对我的回答的扩展，以再次强调你可以使用响应式(Reactive)表单来做到这一点......我也想提供模板驱动的表单场景。

• 这里的共同主题是，无论您使用响应式(Reactive)表单还是模板驱动表单，您都需要以编程方式标记输入触摸...
• 在模板驱动的表单中，您还需要做通过模板引用相同，以便您可以调用控件上的 markAsTouched() 方法你的 ngOnInit 生命周期钩子(Hook)。

设置 id 的模板引用并通过 #id="ngModel" 将其绑定(bind)到 ngModel在输入上...您还需要通过 name="id" 在 id 的输入上分配一个名称这是绑定(bind)到 ngModel 的要求。

<mat-form-field color="accent">
    <input matInput placeholder="ID is required" required="true" [(ngModel)]="uniqueID" name="id" #id="ngModel">
</mat-form-field>

<div *ngIf="id.invalid && (id.dirty || id.touched)">
    <mat-error *ngIf="id.errors.required">
        ID is <strong>required</strong>
    </mat-error>
</div>

<pre>id.errors: {{id.errors | json}}</pre>

从这里您需要使用 @ViewChild在您的组件中获取对 #id 的引用并调用markAsTouched()通过 ngOnInit 生命周期 Hook 在控件上。

import {Component, OnInit, ViewChild} from '@angular/core';

@ViewChild('id') _id : any

ngOnInit(){
  this._id.control.markAsTouched();
}