CODEWITHSUNDEEP
javascriptangularangular-reactive-forms
Kingmaker
Kingmaker

Reputation: 519

Angular reactive form validation aggragete errors

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:

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

Upvotes: 1

Views: 844

Answers (1)

isAif
isAif

Reputation: 2354

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.

Upvotes: 2

Related Questions