ANGULAR Template Driven Forms

Template driven forms are mostly used for creating simpler forms. The essentials for creating Template driven forms:-

• ngModel is used to create two way data bindings for reading and writing values.
• Track state changes and validity of form controls.
• provides visual feedback using css classes
• Also displays validation errors to users

In template driven forms,validations are done in templates.
Here we need to import FormsModule from @angular/forms.
It is easy to work.
Here ngModel is used in input field
CSS classes for Template Driven Forms:
Ng-untouched
Indicates this field is not touched by user
Eg:-if email textbox is not clicked then it is untouched
Ng-touched
Indicates this field is touched by user.once email textbox is clicked then it becomes touched.
Ng-pristine
If default value is not modified is called pristine.if email is not modified then pristine
Ng-valid
Indicates field is valid if all the validation rules are satisfied

Let us see Step by Step Example of Template Driven forms with validation
Step 1:- Open new Angular project named "TemplateDrivenForms" from Visual studio code editor.
Step 2:- Import Forms Module in app.module.ts file.

Step 3:- Create Customer Component.
Step 4:- Go to command line tool, and issue following command to create a new component inside CustomerForm folder. ng g c CustomerForm
Step 5:- After issuing the above command in command line tool, you will see 4 files.

• Customerform.component.css
• Customerform.component.html
• Customerform.component.spec.ts
• Customerform.component.ts

Step 6:- You will find the component selector named "app-customerform" in customerform.component.ts file.This selector should be placed as tag in app.component.html.So that during the runtime of the project , it opens the customerform directly.
app.component.html:-

Now design the customer form using bootstrap css.

  <div class="container">
  <div class="row">
 <div class="form-bg">
 <form #custForm='ngForm' (ngSubmit)="SaveCustomer(custForm)">
 <h1 class="text-center">CUSTOMER DATA FORM<h1>
 <br>
 <div class="form-group">
 CustomerName:  <input type="text" class="form-control" name="customername" #customername="ngModel" [(ngModel)]="model.customername" autofocus required>
 {{customername.className}}
 <div>
 <div>
 <div>
 <div *ngIf="!customername.valid">
     CustomerName is required!
 <div>
 <div class="form-group">
 Street:  <input type="text" class="form-control" name="street" #street="ngModel" [(ngModel)]="model.street" required>
 <div>
 <div *ngIf="!street.valid">
   street is required!
 <div>
 <div class="form-group">
 City:<input type="text" class="form-control" name="city" #city="ngModel" [(ngModel)]="model.city" required>
 <div>
 <div *ngIf="!city.valid">
   City is required
 <div>
 <div class="form-group">
  Country:   <input type="text" class="form-control" name="country" #country="ngModel" [(ngModel)]="model.country" required>
 <div>
 <div *ngIf="!country.valid">
country is required
 <div>
 <div class="form-group">
 Mobile:     <input type="number" class="form-control" name="mobile" #mobile="ngModel" [(ngModel)]="model.mobile" required>
 <div>
 <div *ngIf="!mobile.valid">
Mobile number is required
 <div>
 <div>
 <button type="submit" class="btn btn-default" id="savecustomer">Save Customer<button>
 <div>
 <pre>{ custForm.form.value | json }}<pre>             
 <form>
 <div>
 <div>
 <div>