DEV Community

Dhananjay Kumar
Dhananjay Kumar

Posted on

How to check the status of an Angular Reactive Form’s Control

Sometimes, you may have a requirement to do something when the status of an Angular form control changes.  For example, you have a Login Form, and when the status of the Email control changes from valid to invalid and vice versa, you need to perform some actions. In this post, let us see how we can achieve that.
 
We have a login form,

fb = inject(FormBuilder);
loginForm: FormGroup;

  constructor() {

    this.loginForm = this.fb.group({
      email: [null, [Validators.required]],
      password: [null, [Validators.required]],
    })

 }

Enter fullscreen mode Exit fullscreen mode

On the template, map the loginForm to the HTML Form element and FormControls to the input elements.

<form (ngSubmit)="login()" [formGroup]="loginForm" novalidate>
<input type="text" formControlName="email" placeholder="Enter email" />
<br/>
<input type="password" formControlName="password" placeholder="Enter Password"/>
<br/>
<br/>
<button>Login</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Now whenever the status of the email field changes, you need to take some action.  For that, Angular AbstractControlDirective provides a getter of an observable type called statusChanges().

Image description

You can subscribe to the statusChanges() observable to work with the control’s status change.

checkControlStatus(){
    const email = this.loginForm.get('email'); 
    email?.statusChanges.subscribe((status:any)=>{
       console.log(status);
    })
  }
Enter fullscreen mode Exit fullscreen mode

And further, call the above function In the ngOnInit() life cycle hook.

ngOnInit(): void {
    this.checkControlStatus();
  }

Enter fullscreen mode Exit fullscreen mode

You can check the status for valid or invalid and apply conditional css or log to the API etc. I hope you find this post helpful. Thanks for reading.

Top comments (0)