Setting errors on a FormGroup instance in Angular Reactive Forms not working as expected

Question

I'm using Angular 4.4.3 reactive forms to implement custom validation for a group of controls in a form. The method AbstractControl.setErrors, according to docs updates the errors property of the AbstractControl, upon which it's invoked, updates the status of its parent, but not the parents errors property. I wanted to set the errors property on a FormGroup instance, so I use the setErrors inherited by the FormGroup. However, it does not update errors as expected.

Following is my sample code: Trying it on FormControl instances, does update their errors as well as their parents' validity status (not the parents errors though!):

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

Any idea why?

To further clarify: returning the error directly from the validator (i.e. return {required: true}) works, but still the behavior of setErrors is inconsistent in the case of FormGroup instances, which are instances of AbstractControl. — Bahaa
– Bahaa, Commented Sep 25, 2017 at 14:25

Bahaa · Accepted Answer · 2017-09-26 11:59:19Z

So, thanks to @incognito's confirmation, I figured out where the problem was after further inspection.

setErrors, does set the errors property of the form group instance. However, the custom validator shown in my question doesn't explicitly return a value (i.e. a falsey undefined value). Looking into the code of the reactive forms module in angular, I found this method, which merges errors raised by various validators in this line, the method checks whether errors (undefined in my code snippet) is not equal to null. This condition (as inspected in its es5 version) evaluates to false, which causes the result to be null, thus ignoring the content of the errors property set in the code. The lesson I learned is: always return a value from custom validators, even if further nested FormGroup instances have their own custom logic for setting errors.

Collectives™ on Stack Overflow

Setting errors on a FormGroup instance in Angular Reactive Forms not working as expected

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related