Search⌘ K
AI Features
Home
Courses
Learning Angular

Manipulating Form Data

Explore how to manipulate form data in Angular by using reactive forms. Learn to set or update form values with setValue and patchValue methods, subscribe to valueChanges for real-time feedback, and manage form control states effectively for dynamic user interactions.

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:

TypeScript 4.9.5
this.productForm.setValue({
  name: 'New product',
  price: 150
});

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