Angular 16 reactive form validation; In this tutorial, i am going to show you how to use reactive form and validation in Angular 16 apps.
Angular 16 Reactive Forms Validation
Use the below given steps to make a reactive form with validation in the Angular 16 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
Run the following command on terminal to install angular app:
ng new my-new-app
Step 2 – Import Module
Go to 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
Go to 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 16 Reactive Forms Validation Example - Laratutorials.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>
Step 4 – Update Component ts File
Go to 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
Angular 16 reactive form validation; In this tutorial, You have learned how to use reactive form and validation in Angular 16 apps.