By Vishal Basumatary in javascript — Mar 25, 2023

update formgroup value angular

Update FormGroup Value in Angular

As someone who has worked with Angular, I understand the importance of updating the values in a FormGroup. A FormGroup is a collection of FormControl instances that can be used to control and validate form inputs. Updating the values in a FormGroup can be done in multiple ways depending on your use case.

Method 1: setValue()

The setValue() method is used to set the value of all the controls in a FormGroup.


this.myForm.setValue({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]'
});

In the above code, we set the value of three controls: firstName, lastName, and email. This method will set the value of all the controls in the FormGroup regardless of whether they have been modified or not.

Method 2: patchValue()

The patchValue() method is used to set the value of only some controls in a FormGroup.


this.myForm.patchValue({
  firstName: 'John',
  lastName: 'Doe'
});

In the above code, we set the value of two controls: firstName and lastName. This method will only set the value of controls that are included in the parameter object.

Method 3: setValue() with FormControls

If you want to set the value of a single control in a FormGroup, you can use the setValue() method on the individual FormControl instance.


this.myForm.controls['firstName'].setValue('John');

In the above code, we set the value of the firstName control to 'John'. This method will only update the value of the specified control.

Method 4: patchValue() with FormControls

Similar to Method 3, you can also use patchValue() method to update the value of a single control in a FormGroup.


this.myForm.controls['firstName'].patchValue('John');