[英]Mark required formControls before Validation when using Reactive Forms in Angular 5
We would like to give visual feedback to the user, which field is required, before validation, eg by highlighting the field blue. 我们希望在验证之前 ,例如通过突出显示蓝色字段,向用户提供所需的视觉反馈。
We are using Reactive Forms to validate the user's input: 我们正在使用反应式表单来验证用户的输入:
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = fb.group({
name: ['', Validators.required ],
city: ''
});
}
}
with the template 与模板
<form [formGroup]="myForm">
<div class="form-group">
<label>Name:
<input class="form-control" formControlName="name">
</label>
</div>
<div class="form-group">
<label>City:
<input class="form-control" formControlName="name">
</label>
</div>
</form>
The whole template will be generated from a model later on. 整个模板将在以后的模型中生成。 Because of this, we would like to keep the template as "pure" as possible. 因此,我们希望模板尽可能保持“纯”。
But: For highlighting required fields via CSS, I need either a class or an attribute ( required ) on the input-element. 但是:为了通过CSS突出显示必填字段,我需要在input-element上使用类或属性( required )。 It would be nice, if Angular could set one (or both) to the input
-Element, when the corresponding FormControl
is given an Validator of required
. 当Angular可以为input
-Element设置一个(或两个)到input
-Element时,这是很好的,当相应的FormControl
被提供了required
的Validator required
。
In the above example, I would have to add a class required
or the attribute required
by hand to the input
-Element to make this CSS work: 在上面的例子中,我将不得不加个班required
或属性required
用手的input
-元素使这个CSS工作:
.form-control[required], .form-control.required {
border-color: blue;
}
Is there a way to attach class or attribute to the DOM-Element automatically, when a validator is set to the corresponding FormControl
? 当将验证器设置为相应的FormControl
时,是否可以将类或属性自动附加到DOM元素FormControl
?
So angular does not have anything called as getValidators. 因此angular没有任何称为getValidators的东西。 There is an open issue here https://github.com/angular/angular/issues/13461 这里有一个公开的问题https://github.com/angular/angular/issues/13461
However, here is something you can do to get all formControls with the required validator. 但是,您可以执行以下操作以使用所需的验证器获取所有formControls。 (Not my code: Mentioned by someone on the open issue) (不是我的代码:有人提到公开问题)
getValidators(_f) {
return Object.keys(_f).reduce((a, b) => {
const v = _f[b][1];
if (v && (v === Validators.required || v.indexOf(Validators.required) > -1)) {
if (!a[b]) { a[b] = {}; }
a[b]['required'] = true;
}
return a;
}, {});
}
const _f = {
id: [],
name: [null, Validators.required],
phone: [],
email: [null, [Validators.required, Validators.email]]
};
this.frmMain = this._fb.group(_f);
console.log(this.getValidators(_f)); // {name: {"required": true}, email: {"required": true}}
Once you have the list of all controls with the required validator, you can just loop through them and apply styles accordingly. 一旦有了所有带有所需验证器的控件的列表,就可以遍历它们并相应地应用样式。
I hope the only issue was getting controls with required validator? 我希望唯一的问题是使用必需的验证程序来控制吗? If yes, this should resolve the issue. 如果是,这应该可以解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.