How to Get a Reactive Form Value in Angular?

To get a reactive form value in Angular you can use the form.value property. The form.value property returns an object containing all the form control names along with their respective values.

Let’s say we have a form that contains the firstName, lastName, and age of a student:

this.form = this.formBuilder.group({
  'firstName': ['', Validators.required],
  'lastName': ['', Validators.required],
  'age': ['', Validators.required]
});

Now, whenever you want to get the value of this form, you can simply use the form.value property. This will return you an object that contains the firstName, lastName, and age keys along with their respective values:

console.log(this.form.value);

// Output:
// {
//   "firstName": "John",
//   "lastName": "Doe",
//   "age": "25"
// }

Get Individual Form Control Value

There are two ways to get a form control value in Angular. First, using the get() method and second, using the controls array.

Let’s say we want to get the firstName form field value in the above form using the get() method.

This is how you can get it:

this.form.get('firstName').value

Another way to get the firstName form field value is to use the controls array.

You can get it this way:

this.form.controls['firstName'].value