Learning Angular/

...

/

Manipulating Form Data

Manipulating Form Data

Learn how to manipulate form data using the FormGroup methods setValue and patchValue.

We'll cover the following...

We’ll learn how to use the reactive forms API and set values programmatically to an Angular form. The FormGroup class contains two methods that we can use to change the values of a form programmatically:

  • setValue: Replaces values in all the controls of the form

  • patchValue: Updates values in specific controls of the form

The setValue method accepts an object as a parameter that contains key-value pairs for all form controls. If we want to fill in the details of a product in the product create component programmatically, we should use the following snippet:

Press + to interact
this.productForm.setValue({
  name: 'New product',
  price: 150
});

In the preceding snippet, each key of the object passed in the setValue method must ...