Reactive Forms - setValue, patchValue And valueChanges

Reactive forms are completely different as compared to template-driven forms. Here, we create form structure first, before we jump into HTML code and it helps to separate components models with help of controls and group for easy understanding and targeting to fulfill the specific model operations.

Reactive forms are completely different as compared to the template-driven forms. Here, we will create a form structure before jumping into the HTML code. It helps to separate the component models with the help of controls and group these for easy understanding and targeting to fulfill the specific model operations.

 

Example - Sample FormGroup,

this.personalForm = this.formBuilder.group({
    firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]],
    lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]],
    address: ['', [Validators.required]],
    other: this.formBuilder.group({
        education: [''],
        age: [''],
        gendar: ['male']
    })
});

I’m creating the personal form details without thinking of how HTML code or bindings will work. Once it is ready, simply hook-in to the HTML.

<form class="form-horizontal" [formGroup]="personalForm" (ngSubmit)="onSubmit()">
   <inputidinputid=”firstName”type=”text”class=”form-control”formControlName=”firstName”>
   [........]
</form>

The complete reference can be referred to from here – https://angular.io/guide/reactive-forms

Demo POC

Below is the sample form with First Name, Address etc. fields – here, I’m trying to add new data and load some data with the help of setValue and patchValue properties of a FormGroup.

 

On constructor, I have initialized the proper values to all fields.

this.personalForm.setValue({
    firstName: ’Rajendra’,
    lastName: ’Taradale’,
    address: ’Dhanori Pune’,
    other: {
        education: ’B C A’,
        age: 30,
        gendar: ’male’
    }
});

setValue

The name itself describes that we are setting the new values to all the fields of the form. 

Prerequisites– It’s mandatory to update or provide complete model structure for all fields/form controls within the FormGroup. If you miss any property or subset collections,  then it will throw an exception.

Let’s see the exception case – (I have removed the other subset collection from the FromGroup as I don’t want to update).

Here is the code for setValue click event.

onsetValueClick(): void {
    this.personalForm.setValue({
        firstName: ”,
        lastName: ”,
        address: ”,
        // other: {
        // education: ‘B Tech’,
        // age: 30,
        // gendar: ‘male’
        // }
    });
}

 

patchValue

Here, patch means updating the form control values partially. In this case, if you miss any property to update, it will not throw an exception.

Now, let us try the same model in using the patchValue method. Here is the click event code.

onpatchValueClick(): void {
    this.personalForm.patchValue({
        firstName: ’Rajendra’,
        lastName: ’Taradale’,
        address: ”,
        // other: {
        // education: ”,
        // age: ”,
        // gendar: ”
        // }
    });
}

Here is a patchValue response – without any error.

valueChanges

This property works like an observable as if any value or property changes in a form, it simply triggers that value – like in ASP.NET, we have an event called dropdown change or text box changed. With the help of the valuesChanges event, we can perform the dependent operations as per the user selection or changes.

In this demo, I’m trying to store the complete form data in a console window if any control value changes.

Here, I am editing the last name field – added space and then 1, you can see that it is stored two times - one for space and another one for 1.

We can use the valueChanges trigger on FormControl, FormGroup, or SubGroup.

FormControl

this.personalForm.get(‘firstName’).valueChanges.subscribe(
   value=> {
      console.log(value);
   }
);

 FormGroup

this.personalForm.valueChanges.subscribe(
   value=> {
      console.log(JSON.stringify(value));
   }
);

Subform Group

this.personalForm.get(‘other’).valueChanges.subscribe(
   value=> {
      console.log(value);
   }
);

 

• GitHub