Question

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

以下是我的示例代码：在FormControl实例上尝试它，确实更新了他们的错误以及他们的父母＆＃39;有效性状态（虽然不是父母的错误！）：

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

知道为什么吗？

Answer 1

所以，感谢@ incognito的确认，我在进一步检查后发现了问题所在。

setErrors，设置表单组实例的errors属性。但是，我的问题中显示的自定义验证器并未显式返回值（即假定的未定义值）。查看angular中反应式表单模块的代码，我发现this method，它合并了this line中各种验证器引发的错误，该方法检查错误（在我的代码片段中未定义）是否不等于空值。此条件（在其es5版本中检查）的计算结果为false，这会导致结果为null，从而忽略代码中设置的errors属性的内容。我学到的经验是：总是从自定义验证器返回一个值，即使进一步嵌套的FormGroup实例有自己的自定义逻辑来设置错误。

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

1 个答案: