在 Angular Reactive Forms 中的 FormGroup 实例上设置错误无法按预期工作答案

【问题标题】：Setting errors on a FormGroup instance in Angular Reactive Forms not working as expected在 Angular Reactive Forms 中的 FormGroup 实例上设置错误无法按预期工作
【发布时间】：2018-03-06 13:04:14
【问题描述】：

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

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

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

知道为什么吗？

【问题讨论】：

进一步澄清：直接从验证器返回错误（即return {required: true}）有效，但setErrors 的行为在FormGroup 实例的情况下仍然不一致，这些实例是AbstractControl.

标签： angular validation typescript angular-reactive-forms angular-forms

【解决方案1】：

所以，感谢@incognito 的确认，经过进一步检查，我找到了问题所在。

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

【讨论】：