垫子形式字段总是显示所需的红色

当mat-form-field有required="true"时，有没有办法始终显示它的红色，即使我从未在它上设置焦点或触摸过它？

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

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

怎么可能？

如果您愿意使用被动形式。。。使用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();
}

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

应用程序演示：
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': ''
});

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

更新：

由于[(ngModel)]和Marshal提到的一样是不推荐使用的，您可以删除[(ngModel)]，并使用FormControl的内置ObservablevalueChanges来获得用户输入，如下所示：

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

您可以使用类似于文档中示例的自定义垫子标签。

文档中示例的Stacklitz

模板代码：

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

由于我们通过mat标签显示*，在输入上放置required属性将在字段上添加一个额外的*，因此应该省略它。您可以在组件中处理验证。

当没有提供值时，您还可以设置条件标签颜色或类。

html

<mat-form-field>
<mat-label [style.color]='!value ? "red" : "inherit"'>Label</mat-label>
<input matInput [(ngModel)]='value' required>
</mat-form-field>

示例

如果你想使用类：

html

<mat-form-field>
<mat-label [class.required]='!value'>Label</mat-label>
<input matInput [(ngModel)]='value' required>
</mat-form-field>

css(scss(

.required {
color: red;
// color: mat-color($warn, 500);
}

相关内容

最新更新

热门标签：