Angular13 Reactive Form Validation

Angular 13 Reactive Form Validation is implemented into the Angular Component typescript file like the componentName.component.ts file.
I have an app component, so now I am creating validation for the Reactive form. please follow the below steps to create the Validations.

1) Create Steps for the app.component.ts file

Step1) Firstly import Validators from @angular/forms


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

Step 2) define the validation on the field name into the AppComponent class.


  userForm!: FormGroup;
  this.userForm = this.fb.group({
      userName: ['', [Validators.required]],
      userAge: ['', [Validators.required, Validators.pattern(/^-?(0|[1-9]\d*)?$/)]]
    });

Note:- You can create multiple validations on the field, we created two validations on userAge, First Validation is used to userAge must be validated and second Validation is used to define the userAge must be numeric only.

Step 3) Get the form field data.


get formData() { return this.userForm.controls; }

After, creating the validation then complete the app.component.ts file


import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  userForm!: FormGroup;
  submitted = false;
  constructor( protected readonly fb:FormBuilder) {
  }

 get formData() {
   return this.userForm.controls;
 }

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

  setupUserForm(){
    this.userForm = this.fb.group({
      userName: ['',[Validators.required]],
      userAge:['',[Validators.required, Validators.pattern(/^-?(0|[1-9]\d*)?$/)]]
    })
  }

  submitUserform(){
  this.submitted = true;
  if(this.userForm.invalid){
    return;
  }
  let user_name=  this.userForm.controls['userName'].value;
  let user_age=  this.userForm.controls['userAge'].value;
  console.log("username: "+user_name);
  console.log("userage: "+user_age);  
}

}

2) Create Steps for the app.component.html file

Step1) implement the validation under the validate fields like userAge through *ngIf condition.


<input type="text" formControlName="userAge"  [ngClass]= "{ 'is-invalid': submitted && formData['userAge'].errors}"/>             
<div *ngIf="submitted && formData['userAge'].errors" class="invalid-feedback">
    <div *ngIf="formData['userAge'].errors['required']">User Age is required</div>
    <div *ngIf="formData['userAge'].errors['pattern']">User Age must be  numeric</div>
</div>

Now, complete the app.component.html file


<div class="container">
    <div class="col-md-3"></div>
        <div class="col-md-6 text-center">
          <h1>Add User</h1>
          <form id="user" [formGroup]="userForm" class="form">
            <div class="col-md-12 row">
              <div class="col-md-4">
                <label>User Name</label>
              </div>
              <div class="col-md-8">
                <input type="text" formControlName="userName" [ngClass]= "{ 'is-invalid': submitted && formData['userName'].errors}" /> 
                <div *ngIf="submitted && formData['userName'].errors" class="invalid-feedback">
                  <div *ngIf="formData['userName'].errors['required']">User Name is required</div>
                </div>         
              </div>
            </div>
            <div class="col-md-12 row" style="height: 15px"></div>
            <div class="col-md-12 row">
              <div class="col-md-4">
                <label>User Age</label>
              </div>
              <div class="col-md-8">
                <input type="text" formControlName="userAge"  [ngClass]= "{ 'is-invalid': submitted && formData['userAge'].errors}"/>             
                <div *ngIf="submitted && formData['userAge'].errors" class="invalid-feedback">
                  <div *ngIf="formData['userAge'].errors['required']">User Age is required</div>
                  <div *ngIf="formData['userAge'].errors['pattern']">User Age must be  numeric</div>
                </div>   
              </div>
            </div>
            <div class="col-md-12 row" style="height: 15px"></div>
            <div  align="center">
              <input type="submit" name="userSubmit" (click)="submitUserform()" value="Add User" />
            </div>
          </form>
        </div>
        <div class="col-md-3"></div>
      </div>

Create the css into the users.component.scss file.


.invalid-feedback{color:red;}

Now run the URL on the browser.


http://localhost:4200/users

Angular13 Reactive Form Validation

1) Create Steps for the app.component.ts file

2) Create Steps for the app.component.html file

Create the css into the users.component.scss file.

Now run the URL on the browser.

5) When I click the submit button without fill the textbox value then shows validation.

6) When I click the submit button after filling the string value into the userAge textbox then shows validation.