代码之家 › 专栏 › 技术社区 › Sergio Mendez

mat表单域总是显示所需的红色?

angular-material2 angular-material angular

-1

Sergio Mendez · 技术社区 · 6 年前

有没有什么方法可以一直显示红色的 mat-form-field 当它拥有 required="true"

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

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

怎么可能呢?

2 回复 | 直到 6 年前

Marshal 6 年前

如果你愿意用反应形式。。。使用 ngAfterViewInit ,您可以编程方式将字段标记为touched以强制执行错误。

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

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

基于我最初的回答,以及阿披实扩展我的答案,以重申你可以用反应形式来做这件事。。。我还想提供模板驱动的表单场景。

不管您使用的是反应式表单还是模板驱动的表单,这里的共同主题是,您需要以编程方式标记
在模板驱动的表单中,您还需要通过模板引用进行相同的操作,以便可以对中的控件调用markAsTouched()方法

设置一个id的模板引用并通过将其绑定到ngModel #id="ngModel" 在输入端。。。您还需要在id via的输入上指定一个名称 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 在组件中获取引用 #id 然后打电话 markAsTouched() 通过ngOnInit生命周期钩子控制。

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

@ViewChild('id') _id : any

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

Abhishek Kumar 6 年前

下面的演示展示了一个现有的角材料反应形式所需的情况。

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

方法:

在 ngOnInit
this.formGroup.get('name').markAsTouched();
我们也可以利用 touched 属性from输入为
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': ''
    });

Shafeeq Mohammed 5 年前

HTML格式

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

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

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

Goutham 5 年前

可以使用与中的示例类似的自定义材质标签 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>

因为我们是通过垫子标签显示*的 required 属性将在字段上加上一个*号,因此应该省略它。您可以在组件中处理验证。

Fouad Boukredine 4 年前

更新:

因为 [(ngModel)] 如Marshal所述,已弃用,您可以删除 [(ngModel)] valueChanges 属于 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;
    );
}

原始答案:

最简单的解决办法是阿披实·库马尔的回答。以下是您在示例中需要的全部内容:

<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();
}