我正在使用 Angular 4.4.3 响应式(Reactive)表单来为表单中的一组控件实现自定义验证。方法AbstractControl.setErrors ,根据文档更新 AbstractControl 的 errors 属性,在其上调用它,更新其父级的状态,但不更新父级的错误属性。我想在 FormGroup 实例上设置 errors 属性,所以我使用了 FormGroup 继承的 setErrors。但是,它不会按预期更新错误。
以下是我的示例代码:
在 FormControl 实例上尝试它,确实会更新它们的错误以及它们 parent 的有效性状态(虽然不是 parent 的错误!):
let myFormGroup
= this._formBuilder
.group({
ctrl1: [null],
ctrl2: [null]
},
{
validator: (fg: FormGroup) => {
let ctrl1 = fg.get('ctrl1'),
ctrl2 = fg.get('ctrl2'),
ctrl1Empty = !ctrl1.value,
ctrl2Empty = !ctrl2.value;
//Successfully sets ctrl1.errors and fg.status, but not fg.errors
if (ctrl1empty)
ctrl1.setErrors({ctrl1required: true});
//Successfully sets ctrl2.errors and fg.status, but not fg.errors
if (ctrl2Empty)
ctrl2.setErrors({ctrl2required: true});
//Doesn't work, doesn't update fg.errors
if (ctrl1Empty && ctrl2Empty)
fg.setErrors({required: true});
}
})
知道为什么吗?
最佳答案
因此,感谢@incognito 的确认,经过进一步检查,我找出了问题所在。
setErrors,确实设置了表单组实例的错误属性。但是,我的问题中显示的自定义验证器没有明确返回值(即错误的未定义值)。在 Angular 中查看响应式表单模块的代码,我发现 this method ,它合并了 this line 中各种验证器引发的错误,该方法检查错误(在我的代码片段中未定义)是否不等于 null。此条件(在其 es5 版本中检查)评估为 false,这导致结果为 null,从而忽略代码中设置的 errors 属性的内容。我学到的教训是:始终从自定义验证器返回一个值,即使进一步嵌套的 FormGroup 实例有自己的自定义逻辑来设置错误。
关于angular - 在 Angular Reactive Forms 中的 FormGroup 实例上设置错误无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46407264/