Reactive form validation in Angular 12 app. In this tutorial, i am going to show you how to use reactive form validation in angular 12 app.
Reactive forms include a set of validator functions for common use cases. These functions receive a control to validate against and return an error object or a null value based on the validation check. Import the Validators class from the @angular/forms package.
In this reactive form validation tutorial, you will learn how to use Reactive Forms in Angular 12.
Reactive Form Validation In Angular 12
- Step 1 – Create New Angular App
- Step 2 – Import Form Module
- Step 3 – Add Code on View File
- Step 4 – Use Component ts File
- Step 5 – Start Angular App
Step 1 – Create New Angular App
Execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Import Module
Next, Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 3 – Add Code on View File
Create simple reactive form with input file element. So, visit src/app/app.component.html and update the following code into it:
<h1>Angular 11 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.required">Name is required.</div> <div *ngIf="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.required">Email is required.</div> <div *ngIf="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.required">Body is required.</div> </div> </div> <button class="btn btn-primary" type="submit">Submit</button> </form>
Step 4 – Use Component ts File
Go to 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
Execute the following command on terminal to start angular app:
ng serve