Question

mat-form-field拥有required="true"时，是否有任何方法可以始终显示红色，即使我从未将焦点放在或触摸过它呢？

<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对我的答案的扩展，以加强您可以使用反应式表单来执行此操作...我也想提供模板驱动的表单方案。

这里的共同主题是，无论您使用反应式表单还是模板驱动的表单，都需要以编程方式标记触摸输入...
在模板驱动的表单中，您还需要做通过模板引用相同，因此您可以在控件中调用markAsTouched（）方法您的ngOnInit生命周期挂钩。

设置id的模板引用，并通过输入上的#id="ngModel"将其绑定到ngModel ...您还需要通过name="id"在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以获得对#id的引用，并通过ngOnInit生命周期钩子在控件上调用markAsTouched()。

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

@ViewChild('id') _id : any

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

Answer 2

下面的演示以现有的角材料反作用形式显示了所需的情况。

应用程序演示：
https://stackblitz.com/edit/example-angular-material-reactive-form-2rksrw?file=app/app.component.ts

方法：

在ngOnInit中，我们可以从表单中获取输入元素，并可以将其修改为
this.formGroup.get('name').markAsTouched();
我们还可以将from的touched属性用作
this.formGroup.get('name').touched = true;，但这会产生错误Cannot assign to 'touched' because it is a constant or a read-only property。
但是在stackblitz演示中，您可以看到它正常工作，因为我们也可以看到与this.formGroup.get('name').touched = false;的区别。

formGroup以演示形式通过以下方式创建：

 this.formGroup = this.formBuilder.group({
      'email': [null, [Validators.required, Validators.pattern(emailregex)]],
      'name': [null, Validators.required],
      'password': [null, [Validators.required, this.checkPassword]],
      'description': [null, [Validators.required]],
      'validate': ''
    });

Answer 3

HTML

   <mat-form-field class="floatRight"> <input matInput [formControl]="formfieldControl" placeholder="enter name"[(ngModel)]="strSolrCoreName" Required> 
   </mat-form-field>

.ts文件

import { FormControl, Validators } from '@angular/forms';

export class abc{
formfieldControl = new FormControl( '', [Validators.required] );
}

Answer 4

您可以使用类似于docs中示例的自定义标签。

Stackblitz for the example in docs

模板代码：

<mat-form-field>
  <mat-label>ID is required<span style="color: red">&nbsp;*</span></mat-label>
  <input matInput [(ngModel)]="uniqueID">
</mat-form-field>

由于我们通过mat-label显示*，因此将required属性放在输入中将在字段上附加一个*，因此应将其省略。您可以在组件中处理验证。

Answer 5

更新：

由于[(ngModel)]如Marshal所述已被弃用，因此您可以删除[(ngModel)]并使用valueChanges的内置Observable FormControl获取用户输入，如下所示：

.html

<mat-form-field color="accent">
  <input matInput placeholder="ID is required" required [formControl]="formFieldControl">
</mat-form-field>

.ts

formFieldControl: FormControl;

ngOnInit() {
  formFieldControl = new FormControl('', [Validators.required]);
  this.formFieldControl.markAsTouched();
  this.formFieldControl.valueChanges.subscribe(value
      uniqueID = value;
    );
}

原始答案：

最简单的解决方案是Abhishek Kumar的答案。这是您示例中所需的全部内容：

.html

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

.ts

formFieldControl: FormControl;

ngOnInit() {
  this.formFieldControl = new FormControl('', [Validators.required]);
  this.formFieldControl.markAsTouched();
}

mat-form-field始终显示所需的红色？

5 个答案: