Angular 2 - FormControl setValue 'onlySelf'

Question

Trying to understand what the 'onlySelf' parameter does when passing to setValue.

this.form.get('name').setValue('', { onlySelf: true })

The documentation says: "If onlySelf is true, this change will only affect the validation of this FormControl and not its parent component. This defaults to false."

However I'm struggling to understand this. Still fairly new to the using Angulars' model driven forms.

Answer 1

Angular2 by default will check for the form control/form group validity cascadingly up to the top level whenever there's an update to any form element value, unless you say no. onlySelf is the tool to help you do that.

Say you have a loginForm that has a username field and a password field, both of them are required, like this:

this.userNameControl = this.formBuilder.control('Harry', Validators.required);
this.passwordControl = this.formBuilder.control('S3cReT', Validators.required);
this.loginForm = this.formBuilder.group({
  userName: this.userNameControl,
  password: this.passwordControl
});

After this code, this.loginForm.valid is true.

If you set the value of a control using the default setting (onlySelf = false), Angular2 will update the control's validity as well as form group's validity. For example, this:

this.passwordControl.setValue('');

will result in

this.passwordControl.valid === false
this.loginForm.valid === false

However, this:

this.passwordControl.setValue('', { onlySelf: true });

will only change passwordControl's validity only:

this.passwordControl.valid === false
this.loginForm.valid === true

Answer 2

Put it this way, let's say that you have a form, called mainForm which is valid. It has four controls on it and all four have a value. Now, you decide to update the value of one of your controls, let's say you update it to some incorrect value and you specify onlySelf: true. If you try to call this.mainForm.valid, you will get the result that your form is valid even though your control is not valid, and it's invalid state should not allow the form to be submitted. But because the forms valid property is reporting true, you will be submitting inconsistent values to the backend.

It might be confusing why you would have this property, but there might be occasions when you don't want to invalidate the form because of one value or control. Probably you have some advanced checks on the server and you want to correct the value on the server or you might depend on a value from some external web service that might not be available at the time. I'm sure there are number of scenarios but this is something from top of my head.