Angular 14 Reactive Forms Validation Example

Angular 14 reactive form validation; In this tutorial, you will learn how to use reactive form and validation in angular 14 apps.

Angular 14 Reactive Forms Validation

Use the following steps to create a reactive Form with validation in the angular 14 apps:

• Step 1 – Create New Angular App
• Step 2 – Import Form Module
• Step 3 – Create Reactive Form in View File
• Step 4 – Update Component ts File
• Step 5 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Import Module

Visit src/app/ directory and open app.module.ts file. Then import HttpClientModule, FormsModule and ReactiveFormsModule in this file, as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 – Create Reactive Form in View File

Create simple reactive form with input file element. So, visit src/app directory and open app.component.html file. Then update the following code into it for simple reactive form in angular apps; as follows:

<h1>Angular 14 Reactive Forms Validation Example - Tutsmake.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

    <div class="form-group">
        <label for="name">Name</label>
        <input
            formControlName="name"
            id="name"
            type="text"
            class="form-control">
        <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
            <div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>


            <div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
        </div>
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <input
            formControlName="email"
            id="email"
            type="text"
            class="form-control">
        <div *ngIf="f['email'].touched && f['email'].invalid" class="alert alert-danger">
            <div *ngIf="f['email'].errors && f['email'].errors['required']">Email is required.</div>
            <div *ngIf="f['email'].errors && f['email'].errors['email']">Please, enter valid email address.</div>
        </div>
    </div>

    <div class="form-group">
        <label for="body">Body</label>
        <textarea
            formControlName="body"
            id="body"
            type="text"
            class="form-control">
        </textarea>
        <div *ngIf="f['body'].touched && f['body'].invalid" class="alert alert-danger">
            <div *ngIf="f['body'].errors && f['body'].errors['required']">Body is required.</div>
        </div>
    </div>

    <button class="btn btn-primary" [disabled]="form.invalid" type="submit">Submit</button>
</form>

Note that:- In the abvoe form, have used bootstrap 5 classes. if you want to add than then; you can see the following article for that; as follow:

Step 4 – Update Component ts File

Visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

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

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

  form = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.email]),
    body: new FormControl('', Validators.required)
  });

  get f(){
    return this.form.controls;
  }

  submit(){
    console.log(this.form.value);
  }

}

Step 5 – Start Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Open browser, enter the below url:

http://localhost:4200

Conclusion

Ultimately, this tutorial is over. Using this profound guide, now you can create an angular form with reactive forms and validate using reactive forms validator API. I guess you would love this tutorial and propel forward to other developer friends.