View video tutorial
ANGULAR Forms Validation TDF
ANGULAR
Template-driven validation in Angular is accomplished by applying logic to the HTML template using standard HTML validation features and Angular directives.
Angular TDF Forms Validation Example
➔ This example shows how TDF Forms Validation works in Angular.
Create a project by ng new tdf-form-validation command.
ng new tdf-form-validation
app.module.ts file
Copy this file content to the target file.
Example
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Copy the code and try it out practically in your learning environment.
app.component.ts file
Copy this file content to the target file.
Example
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Porduct } from './porduct';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = "Angular Template Driven Form Validation";
noradios: boolean = false;
submit(form: any) {
if (form.valid) {
var firstName = form.value.firstName;
console.log(firstName);
var lastName = form.value.lastName;
console.log(lastName);
var country = form.value.country;
console.log(country);
var acceptTerms = form.value.acceptTerms;
console.log(acceptTerms);
var gender = form.value.gender;
console.log(gender);
var comment = form.value.comment;
console.log(comment);
}
if (form.gender == "") {
this.noradios = true;
}
}
resetting(form: NgForm) {
form.reset();
}
}
Copy the code and try it out practically in your learning environment.
HTML app.component.html File
Copy this file content to the target file.
Example
<div class="container">
<h1>Angular Forms Validation Template Driven </h1>
<form #contactForm="ngForm" (ngSubmit)="submit(contactForm)">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" #firstName="ngModel" ngModel required
minlength="3" maxlength="10" pattern="^[A-Z]+$">
<div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">
<div *ngIf="firstName.errors && firstName.errors['required']">First Name is required.</div>
<div *ngIf="firstName.errors && firstName.errors['minlength']">First Name is minimum {{ firstName.errors &&
firstName.errors['minlength'].requiredLength }} character.</div>
<div *ngIf="firstName.errors && firstName.errors['maxlength']">First Name is maximum 10 character.</div>
<div *ngIf="firstName.errors && firstName.errors['pattern']">First Name is Capital leter only.</div>
</div>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" #lastName="ngModel" ngModel required
pattern="^[a-z]{3,5}$">
<div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">
<div *ngIf="lastName.errors && lastName.errors['required']">Last Name is required.</div>
<div *ngIf="lastName.errors && lastName.errors['pattern']">Last Name is small letter 3 to 5 characters.</div>
</div>
</div>
<div class="form-group">
<label for="country">Select country</label>
<select class="form-select form-control" aria-label="Default select example" id="country" name="country"
#country="ngModel" ngModel required>
<option value="canada">CANADA</option>
<option value="usa">USA</option>
</select>
<div *ngIf="country.touched && !country.valid" class="alert alert-danger">
<span class="help-block" *ngIf="country.errors && country.errors['required']">Please select a valid
Country!</span>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="acceptTerms" name="acceptTerms" #acceptTerms="ngModel" ngModel
required checked>
<label class="form-check-label" for="acceptTerms">
I have read and agree to the Terms
</label>
</div>
<div *ngIf="acceptTerms.touched && !acceptTerms.valid" class="alert alert-danger">
<span class="help-block" *ngIf="acceptTerms.errors && acceptTerms.errors"> Accept Terms is required</span>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="female" name="gender" #female="ngModel" value="female" ngModel
required>
<label class="form-check-label" for="female">
Female
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="male" name="gender" #male="ngModel" value="male" ngModel
required>
<label class="form-check-label" for="male">
Male
</label>
</div>
<div *ngIf="(female.invalid || male.invalid) && contactForm.touched" class="alert alert-danger">
<p>Please select either value</p>
</div>
<!-- <div *ngIf="noradios && contactForm.invalid">
<p>Please select either value</p>
</div> -->
<div class="form-group">
<label for="comment">Comment</label>
<textarea class="form-control" id="comment" name="comment" #comment="ngModel" ngModel required cols="30"
rows="5"></textarea>
<div class="alert alert-danger" *ngIf="comment.touched && !comment.valid">
<div *ngIf="comment.errors && comment.errors['required']">Comments is required.</div>
</div>
</div>
<!-- <button class="btn btn-primary p-2 m-3" type="submit" [class.disabled]="!contactForm.valid">Submit</button> -->
<button class="btn btn-primary p-2 m-3" type="submit">Submit</button>
<button type="button" (click)="resetting(contactForm)" class="btn btn-warning float-right p-2 m-3">Reset</button>
</form>
</div>
<router-outlet></router-outlet>
Copy the code and try it out practically in your learning environment.
Output
Run project by ng serve in command line (from inside project directory).
program output