我想通过总结多个数字输入字段的值并为 Angular 创建自定义验证器来验证它们。
每个输入看起来像这样：
<input type="number" min="0" max="10">
有多个数字输入，每个数字可以输入 0 到 10 之间的值，但所有字段的总和必须小于或等于 10。
我有一个函数，如果所有输入字段的总和小于或等于 10，则返回 true。
但是我如何使用自定义 Angular 验证器来实现这一目标呢？以便立即出现错误消息。
就像前面提到的对组本身进行设置验证一样，例如：
this.myForm = fb.group({
field1: [null],
field2: [null]
// more fields
}, {validator: this.myValidator})
然后在验证器中迭代组中的表单控件，求和并返回错误或null基于有效与否：
myValidator(group: FormGroup) {
let sum = 0;
for(let a in group.controls) {
sum += group.get([a]).value;
}
return sum > 10 ? { notValid: true} : null
}
在模板中，您可以通过以下方式显示错误：
*ngIf="myForm.hasError('notValid')"
堆栈闪电战 https://stackblitz.com/edit/angular-hzpn9j?file=app%2Fapp.component.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
