In this blog, you will find the complete source code of form created using Template driven approach of angular forms with Model Class binding, Two Way Data Binding, Form Validation, Error Messages and also Form Submission and data get and also how to reset the form on reset button click.
We have created all kinds of input controls in our form like, radio buttons, checkboxes, dropdownlist, email control, number control etc
Source Code
tdf.component.html – Form page code
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="bg-primary p-3 text-center">
<h2>Template Driven Form</h2>
</div>
<form #newForm="ngForm" (ngSubmit)="save(newForm.value)" novalidate>
{{ newForm.value | json }}
<hr>
{{std | json}}
<hr>
<div class="form-group">
<label for="">Enter Name: </label>
<input type="text" minlength="3" maxlength="15" [class.is-invalid]="name.touched && name.invalid" required #name="ngModel" name="name" [(ngModel)]="std.name" class="form-control" placeholder="Enter Name" ngModel>
</div>
<div class="alert alert-danger" *ngIf="name.touched && name.invalid">
<div *ngIf="name.errors && name.errors['required']">
Name is Required
</div>
<div *ngIf="name.errors && name.errors['minlength']">
3 Characters Must
</div>
</div>
<!-- Dirty = {{name.dirty}}
<br>
Pristine = {{name.pristine}} -->
<!-- Valid = {{name.valid}}
<br>
Invalid = {{name.invalid}} -->
<!-- Touched = {{name.touched}}
<br>
Un-Touched = {{name.untouched}} -->
<div class="form-group">
<label for="">Enter Age: </label>
<input type="number" required min="10" max="50" #age="ngModel" [class.is-invalid]="age.touched && age.invalid" name="age" [(ngModel)]="std.age" class="form-control" placeholder="Enter Age" ngModel>
</div>
<div class="alert alert-danger" *ngIf="age.touched && age.invalid">
<div *ngIf="age.errors && age.errors['required']">
Age is Required
</div>
<div *ngIf="age.errors && age.errors['min']">
Age must be greater or equal to 10
</div>
<div *ngIf="age.errors && age.errors['max']">
Age must be lesser or equal to 50
</div>
</div>
<div class="form-group">
<label for="">Enter Email: </label>
<input type="text" required pattern="^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$" name="email" #mail="ngModel" [class.is-invalid]="mail.touched && mail.invalid" [(ngModel)]="std.email" class="form-control" placeholder="Enter Email" ngModel>
</div>
<div class="alert alert-danger" *ngIf="mail.touched && mail.invalid">
<div *ngIf="mail.errors && mail.errors['required']">
Email is Required
</div>
<div *ngIf="mail.errors && mail.errors['pattern']">
Invalid Email
</div>
</div>
<div class="form-group">
<label for="">Enter Password: </label>
<input type="text" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" name="pass" #pass="ngModel" [class.is-invalid]="pass.touched && pass.invalid" [(ngModel)]="std.pass" class="form-control" placeholder="Enter Password" ngModel>
</div>
<div class="alert alert-danger" *ngIf="pass.touched && pass.invalid">
<div *ngIf="pass.errors && pass.errors['required']">
Password is Required
</div>
<div *ngIf="pass.errors && pass.errors['pattern']">
Please enter Strong Password
</div>
</div>
<br>
<label for="">Gender</label>
<div class="form-check">
<input type="radio" class="form-check-input" required value="Male" #gender="ngModel" ngModel [(ngModel)]="std.gender" name="gender">
<label for="">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" required value="Female" #gender="ngModel" ngModel [(ngModel)]="std.gender" name="gender">
<label for="">Female</label>
</div>
<br>
<div class="form-group">
<label for="">Country </label>
<select name="country" class="form-control" required [class.is-invalid]="country.touched && country.invalid" #country="ngModel" ngModel [(ngModel)]="std.country" id="">
<option value="" selected>Select</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
</select>
</div>
<div class="alert alert-danger" *ngIf="country.touched && country.invalid">
<div *ngIf="country.errors && country.errors['required']">
Country is Required
</div>
</div>
<br>
<div class="form-check">
<input type="checkbox" class="form-check-input" required name="accept" #accept="ngModel" ngModel [(ngModel)]="std.accept">
<label for="">I Accept Terms & Conditions</label>
</div>
<br>
<label for="">Select Hobbies: </label>
<div class="form-check">
<input type="checkbox" ngModel (change)="onChange($event)" class="form-check-input" name="hobbies" value="Singing" id="">
<label for="">Singing</label>
</div>
<div class="form-check">
<input type="checkbox" ngModel (change)="onChange($event)" class="form-check-input" name="hobbies" value="Dancing" id="">
<label for="">Dancing</label>
</div>
<div class="form-check">
<input type="checkbox" ngModel (change)="onChange($event)" class="form-check-input" name="hobbies" value="Reading" id="">
<label for="">Reading</label>
</div>
<br>
<div class="d-grid">
<input type="submit" [class.disabled]="newForm.form.invalid || SelectedHobbies.length == 0" value="Submit" class="btn btn-primary">
<br>
<button type="button" class="btn btn-danger" (click)="resetForm(newForm)">Reset</button>
</div>
</form>
</div>
</div>
</div>
tdf.component.ts File code
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Student } from '../student';
@Component({
selector: 'app-tdf',
templateUrl: './tdf.component.html',
styleUrls: ['./tdf.component.css']
})
export class TdfComponent implements OnInit {
resetForm(my_form: NgForm)
{
my_form.resetForm();
}
SelectedHobbies:string[] = [];
onChange(e:any){
let selectedValue = e.target.value;
let checked = e.target.checked;
if(checked)
{
this.SelectedHobbies.push(selectedValue);
}
else
{
let index = this.SelectedHobbies.indexOf(selectedValue);
this.SelectedHobbies.splice(index, 1);
}
// console.log(selectedValue, checked);
// console.log(e.target.value, e.target.checked);
}
std = new Student()
constructor() {
this.std.country = "";
}
save(formData:any){
// console.log(formData.value);
// console.log(formData);
// const std = new Student(formData.name, formData.age, formData.email);
// console.log(std);
console.log(this.std);
console.log(this.SelectedHobbies);
// formData.reset();
}
ngOnInit(): void {
}
}
student Model Class Code
export class Student {
/**
*
*/
constructor(
public name?:string,
public age?:number,
public email?:string,
public pass?:string,
public gender?:string,
public country?:string,
public accept?:boolean,
) { }
}
No responses yet