How to Find Invalid Form Controls in Angular

Here’s how you can easily debug and find invalid controls in Angular forms.

Photo by Blake Connally on Unsplash

This guide will show you how to find invalid controls in Angular reactive forms.

It can be really hard to find invalid controls in your angular application, especially when you have multiple form controls with lots of validation logic.

For this guide I’ll use this simple form that takes a user's name, last name and their age.

The component code for the form above looks as follows. Basically, the validation for this form is that all the inputs are required. If any of the form controls is not filled with info, it will be labeled invalid.

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms'

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './form.component.html',
  styleUrl: './form.component.css'
})
export class FormComponent {

    firstname = new FormControl('', Validators.required);  
    lastname = new FormControl('', Validators.required);
    age =…