How to Check if a Form Control Exists in the FormGroup in Angular?

A FormControl is a fundamental building block for creating a reactive form in Angular. It represents an individual form element such as an input, dropdown, checkbox, radio button, etc inside a form.

When working with reactive forms in Angular, it’s common to create forms dynamically, where the structure and form controls can vary depending on the data fetched from the server or depending on the user input.

In such cases, it may be difficult to know exactly which form controls are added to the form and what their names are. So, we have to find a way that we can use to check if a form control exists in the FormGroup or not.

In Angular, there are two ways to check if a form control exists in a given reactive form or not. These two ways are as follows:

So, without any further ado let’s get started.


1. Use the FormGroup.get() method to check if the form control exists

The FormGroup.get() method takes a single string parameter which is the name of the form control that we want to check in the given reactive form.

If the form control with the specified name exists in the form group, the get() method returns a FormControl object which contains the form control data, otherwise, it returns the null object.

To understand this, let’s create a reactive form named userForm that contains three form controls fullName, email & password and try to check if the form controls 'fullName' and 'address' exist in this form or not.

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    // Create the form group
    this.userForm = this.formBuilder.group({
      fullName: ['', Validators.required],
      email: ['', Validators.required],
      password: ['', Validators.required]
    });

   }

  ngOnInit(): void {  
    
    // Check if the given form controls exist
    console.log(this.userForm.get('fullName'));   // FormControl 
    console.log(this.userForm.get('address'));    // null

  }

}

In the above example, the form control with name 'fullName' exists in the userForm, therefore, the get() method returns the FormControl object.

Whereas, the form control named 'address' doesn’t exist in the userForm, therefore, the get() method returns a null object.


2. Use the FormGroup.contains() method to check if the form control exists

You can also use the contains() method of the FormGroup class to check if a form control exists in the form or not.

Just like the get() method, the contains() method also takes a single string parameter which is the name of the form control that we want to search.

The contains() method returns a boolean value based on the existence of the form control in the form group. If the specified form control name exists in the reactive form, the contains() method returns true, otherwise, it returns false.

Considering the previous example, we can check the existence of the 'fullName' and 'address' form control names in the userForm form group as follows:

// Check if the given form controls exist
console.log(this.userForm.contains('fullName'));   // true 
console.log(this.userForm.contains('address'));    // false

As you can see from the above example, the form control with name 'fullName' exists in the userForm, therefore, the contains() method returns true.

On the other hand, the form control named 'address' doesn’t exist in the userForm form group, therefore, the contains() method returns false.


Conclusion

In this article, we learned two ways to check if a form control exists in the given form group.

The first method is to use the get() method of the FormGroup class. The get() method returns a FormControl object if the specified form control name exists in the form group, otherwise, it returns a null object.

An alternative approach could be to use the contains() method of the FormGroup class. It returns true if the form control exists in the form group, otherwise, returns false.

Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts