Reactive form validation in Angular 16 is done using the Validators class. This class provides a set of built-in validators that can be used to validate form fields. The Validators class provides methods such as required, minLength, maxLength, pattern, and email. These methods can be used to create custom validators for specific form fields. Additionally, the FormControl class provides methods such as setValidators and updateValueAndValidity which can be used to set and update the validators for a form field.
Reactive form validation in Angular is a means for validating user input in forms using reactive programming techniques. In Angular, forms can be created using template-driven forms or reactive forms. Reactive forms provide a more flexible and powerful approach to form validation than template-driven forms.
With Reactive Form Validation, you programmatically define and manage form controls and their associated validation rules using Angular’s FormGroup, FormControl, and Validator classes. This allows you to build complex forms with dynamic validation logic that can react to user input in real-time.
Reactive form validation in angular; In this tutorial, you will learn how to create and use the reactive form with validation in angular 16 projects.
Angular 16 Reactive Forms Validation Tutorial
Steps to create and use reactive Form with validation in the angular 16 apps:
- Step 1 – Set up a new Angular project
- Step 2 – Import Form Module
- Step 3 – Create a Reactive Form
- Step 4 – Update Component ts File
- Step 5 – Start Angular App
Step 1 – Set up a new Angular project
First of all, open your command prompt or cmd and execute the following command into it to install the angular 16 apps into your system:
ng new my-new-app
Step 2 – Import Module
Now, you need to open app.module.ts to import some modules. So, go to src/app/ directory and open the app.module.ts file.
Then import 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 a Reactive Form
Next, you need to create a simple reactive form with input file element. So, visit src/app directory and open app.component.html file.
Then add the following code into it for simple reactive form in angular apps; as follows:
<h1>Angular 16 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>
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 the command prompt or cmd to start the angular project:
ng serve
Navigate to http://localhost:4200 in your web browser to see the form with validation in action.
Conclusion
That’s it! You now have a working Angular 16 reactive form with validation. As a user interacts with the form, the validation messages will appear dynamically based on the defined validation rules.
