Reactive forms validation in Angular 17 | Custom validation in reactive form | Angular 17 directives
First, we must import to NgForm, FormsModule, ReactiveFormsModule, and CommonModule which will help us validate the Reactive forms in Angular 17.
import { CommonModule } from
'@angular/common';
import { NgForm,FormsModule,
ReactiveFormsModule } from '@angular/forms';
After that imports in the Component,
imports: [RouterOutlet, FormsModule, ReactiveFormsModule, and CommonModule]
See the example code for app.component.ts,
import { CommonModule } from
'@angular/common';
import { Component } from
'@angular/core';
import { NgForm, FormsModule,
ReactiveFormsModule } from '@angular/forms';
import { RouterOutlet } from
'@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, FormsModule, ReactiveFormsModule, CommonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'Reactive forms validation in Angular 17';
form = {
fullname: '',
username: '',
email: '',
password: '',
acceptTerms: false,
};
onSubmit(): void {
console.log(JSON.stringify(this.form));
}
onReset(form: NgForm): void {
form.resetForm();
}
}
See the example code for app.component.html,
<main class="main">
<div class="content">
<div class="left-side">
<h4>Angular 17 Template Driven Form Validation example</h4>
<hr>
<div class="register-form">
<form
name="form"
#f="ngForm"
(ngSubmit)="f.form.valid
&& onSubmit()"
novalidate
>
<div
class="form-group">
<label>Full
Name</label>
<input
type="text"
class="form-control"
name="fullname"
[(ngModel)]="form.fullname"
required
#fullname="ngModel"
[ngClass]="{ 'is-invalid':
f.submitted && fullname.errors }"
/>
@if (f.submitted &&
fullname.errors) {
<div
class="invalid-feedback">
@if
(fullname.errors['required']) {
<div>Full name is
required</div>
}
</div>
}
</div>
<div
class="form-group">
<label>Username</label>
<input
type="text"
class="form-control"
name="username"
[(ngModel)]="form.username"
required
minlength="6"
maxlength="20"
#username="ngModel"
[ngClass]="{ 'is-invalid':
f.submitted && username.errors }"
/>
@if (f.submitted &&
username.errors ){
<div
class="invalid-feedback">
@if
(username.errors['required']) {
<div>Username is
required</div>
}
@if
(username.errors['minlength']) {
<div>Username must be at
least 6 characters</div>
}
@if
(username.errors['maxlength']) {
<div>Username must be at
most 20 characters</div>
}
</div>
}
</div>
<div
class="form-group">
<label>Email</label>
<input
type="email"
class="form-control"
name="email"
[(ngModel)]="form.email"
required
email
#email="ngModel"
[ngClass]="{ 'is-invalid':
f.submitted && email.errors }"
/>
@if (f.submitted &&
email.errors) {
<div
class="invalid-feedback">
@if (email.errors['required'])
{
<div>Email is
required</div>
}
@if (email.errors['email']) {
<div>Email is
invalid</div>
}
</div>
}
</div>
<div
class="form-group">
<label>Password</label>
<input
type="password"
class="form-control"
name="password"
[(ngModel)]="form.password"
required
minlength="6"
maxlength="40"
#password="ngModel"
[ngClass]="{ 'is-invalid':
f.submitted && password.errors }"
/>
@if (f.submitted &&
password.errors) {
<div
class="invalid-feedback">
@if
(password.errors['required']) {
<div>Password is
required</div>
}
@if
(password.errors['minlength']) {
<div>Password must be
at least 6 characters</div>
}
@if
(password.errors['maxlength']) {
<div>Username must not
exceed 40 characters</div>
}
</div>
}
</div>
<div class="form-group
form-check">
<input
type="checkbox"
class="form-control"
name="acceptTerms"
[(ngModel)]="form.acceptTerms"
class="form-check-input"
required
#acceptTerms="ngModel"
[ngClass]="{ 'is-invalid':
f.submitted && acceptTerms.errors }"
/>
<label
for="acceptTerms" class="form-check-label">
I have read and agree to the
Terms
</label>
@if (f.submitted &&
acceptTerms.errors) {
<div
class="invalid-feedback">Accept Terms is required</div>
}
</div>
<hr>
<div
class="form-group">
<button type="submit"
class="btn btn-primary">Register</button>
<button
type="button"
(click)="onReset(f)"
class="btn btn-warning
float-right"
>
Reset
</button>
</div>
</form>
</div>
</div>
</div>
</main>
See the YouTube video on Reactive forms validation:- https://youtu.be/rAYqQtIPTFE
Download source code from Github:- https://github.com/anilsingh581/Angular-17-reactive-Form-Validation
