Angular 2 - FormControl setValue 'onlySelf' parameter

Question

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

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

Answer 1

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.

Answer 2

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