时间戳

首页 > 解决方案 > mat-form-field 总是显示所需的红色？

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

问题描述

mat-form-field有没有办法在 a 有时总是显示红色required="true"，即使我从未将焦点放在它上面或我触摸它？

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

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

怎么可能？

标签： angularangular-materialangular-material2

解决方案

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

  • 不幸的是，我不熟悉如何通过模板驱动的表单来实现这一点。

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

修订

根据我的原始答案，以及 Abhishek 对我的答案的扩展，以重新强制您可以使用反应式表单来做到这一点......我也想提供模板驱动的表单场景。

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

设置 id 的模板引用并通过#id="ngModel"输入将其绑定到 ngModel...您还需要在 id 的输入上分配名称，name="id"这是绑定到 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在你的组件中使用通过 ngOnInit 生命周期钩子获取对控件的引用#id和调用。markAsTouched()

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

@ViewChild('id') _id : any

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

推荐阅读