Angular 反应式表单验证错误答案

【问题标题】：Angular reactive form validation aggragete errorsAngular 反应式表单验证错误
【发布时间】：2020-09-07 06:12:01
【问题描述】：

我正在使用角度反应形式，在我的应用程序中构建一个表单。我已将验证添加到表单中。表格真的很简单：

  ngOnInit() {
     this.form = this.fb.group({
        minQty: ['', Validators.required],
        maxQty: ['', Validators.required]
     });

     this.form.valueChanges.subscribe(val => this.changeFn(val));
}

应用了必需的验证器。我意识到，表单组对象是无效的，但错误属性没有填充来自控件本身的错误。我不知道这是预期的行为还是只是出了问题。

所以我在控制台中看到：

console.log(this.form.status) -> 无效
console.log(this.form.errors) -> null
console.log(this.form.get('minQty').errors) -> {required: true}

在这种情况下this.form.errors不应该包含聚合错误对象，以及所有子控件错误吗？

更新：

刚刚做了一个从整个表单中聚合错误的函数。我没有用 FormArray 测试它。

  public aggregateErrors(form: FormGroup | FormArray, errors: ValidationErrors): void {
     Object.keys(form.controls).forEach((key: string) => {
        const abstractControl = form.controls[key];

        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
            this.aggregateErrors(abstractControl, errors);
        }

        if (abstractControl.errors) {
          errors[key] = abstractControl.errors;
        }
     });
}

【问题讨论】：

标签： javascript angular angular-reactive-forms

【解决方案1】：

错误属于您应用验证的控件而不是父控件。

没有错误聚合，但是表单组可以有自己的验证。

【讨论】：