在 Angular Reactive Forms 中的 FormGroup 实例上设置错误未按预期工作

问题描述

我正在使用 Angular 4.4.3 反应式表单来为表单中的一组控件实现自定义验证.方法 AbstractControl.setErrors，根据文档更新 AbstractControl 的错误属性，在它被调用，更新其父项的状态，但不更新其父项的错误属性.我想在 FormGroup 实例上设置 errors 属性，所以我使用 FormGroup 继承的 setErrors.但是，它不会按预期更新错误.

I'm using Angular 4.4.3 reactive forms to implement custom validation for a group of controls in a form. The method AbstractControl.setErrors, according to docs updates the errors property of the AbstractControl, upon which it's invoked, updates the status of its parent, but not the parents errors property. I wanted to set the errors property on a FormGroup instance, so I use the setErrors inherited by the FormGroup. However, it does not update errors as expected.

以下是我的示例代码:在 FormControl 实例上尝试它，确实会更新他们的错误以及他们父母的有效性状态(虽然不是父母的错误！):

Following is my sample code:Trying it on FormControl instances, does update their errors as well as their parents' validity status (not the parents errors though!):

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 的确认，我在进一步检查后找到了问题所在.

So, thanks to @incognito's confirmation, I figured out where the problem was after further inspection.

setErrors，确实设置表单组实例的错误属性.但是，我的问题中显示的自定义验证器没有明确返回值(即 falsey 未定义值).查看 angular 中反应式表单模块的代码，我发现 这个方法，它合并了这一行，该方法检查错误(在我的代码片段中未定义)是否不等于 null.此条件(在其 es5 版本中检查)评估为 false，导致结果为 null，从而忽略代码中设置的 errors 属性的内容.我学到的教训是:始终从自定义验证器返回一个值，即使进一步嵌套的 FormGroup 实例有自己的用于设置错误的自定义逻辑.

setErrors, does set the errors property of the form group instance. However, the custom validator shown in my question doesn't explicitly return a value (i.e. a falsey undefined value). Looking into the code of the reactive forms module in angular, I found this method, which merges errors raised by various validators in this line, the method checks whether errors (undefined in my code snippet) is not equal to null. This condition (as inspected in its es5 version) evaluates to false, which causes the result to be null, thus ignoring the content of the errors property set in the code. The lesson I learned is: always return a value from custom validators, even if further nested FormGroup instances have their own custom logic for setting errors.

这篇关于在 Angular Reactive Forms 中的 FormGroup 实例上设置错误未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！