Angular reactive form validation aggragete errors

Question

I'm using angular reactive forms, to build a form in my application. I have added validation into form. Form is really simple:

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

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

There are required validators applied. What I realized, that the form group object is INVALID, but errors property is not populated with the errors from controls itself. I do not know, if it is an expected behavior or just something went wrong.

So I see in console:

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

In this case should not this.form.errors contains aggregate error object, with all the child control errors?

Update:

Just did a function which aggregates errors from the whole form. I didn't test it with 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;
        }
     });
}

isAif isAif · Accepted Answer · 2020-05-20T19:38:36

The errors belong to control to which you have applied the validation not to the parent control.

There is no aggregation of errors, but the form group can can have it's own validation.

Angular reactive form validation aggragete errors

1 Answers