Angular 4 template driven form validation

In angular4 you can easily validate form with template driven approach all logic and validaiton done in template we need component only for data that we get from template.If you go to the demo link you can also see the current status and value on the bottom of the form.If you click the submit button it will show you all the error field at the same time and when you start filling the forms you will get appropriate message according to fields validation.
Important thing to remember you have to add FormsModule and import to use template driven approach.
Demo

app.module.cs
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms'
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<div class="container">
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>First Name</label>
    <input #fname="ngModel" ngModel minlength="4" name="fname" type="text" class="form-control form-control-sm" required>
 {{f.controls.valid}}
    <div *ngIf="fname.invalid && (fname.dirty || fname.touched) || fname.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="fname.errors.required">
            First name is required
         </div>
         
           <div *ngIf="fname.errors.minlength">
            Minimum 4 character is required
         </div>
    </div>
  </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
    <label>Last Name</label>
    <input #lname="ngModel" ngModel minlength="4" name="lname" type="text" class="form-control form-control-sm" required>
     <div *ngIf="lname.invalid && (lname.dirty || lname.touched) || lname.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="lname.errors.required">
            Last name is required
         </div>
           <div *ngIf="lname.errors.minlength">
            Minimum 4 character is required
         </div>
    </div>
  </div>
  
  </div>
</div>

 <div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>Email</label>
    <input #email="ngModel" ngModel name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"  type="email" class="form-control form-control-sm" required>
    <div *ngIf="email.invalid && (email.dirty || email.touched) || email.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="email.errors.required">
            Email is required.
         </div>
         
           <div *ngIf="email.errors.pattern">
           Enter valid email address.
         </div>
    </div>
  </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
    <label>Address</label>
    <input #address="ngModel" ngModel minlength="20" name="address" type="text" class="form-control form-control-sm" required>
     <div *ngIf="address.invalid && (address.dirty || address.touched) || address.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="address.errors.required">
            Address is required
         </div>
           <div *ngIf="address.errors.minlength">
            Minimum 20 character is required for Address.
         </div>
    </div>
  </div>
    </div>
  
  </div>
  <div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>Gender</label>
    
    <div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" #gender="ngModel" ngModel name="gender" required  value="Male"> Male
    
  </label>
</div>
 <div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" #gender="ngModel" ngModel name="gender" required value="Female"> Female
  </label>
</div>
<div *ngIf="gender.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="gender.errors.required">
            Gender is required
         </div>
         
    </div>

  </div>
    </div>
     <div class="col-sm">
      <div class="form-group">
    <label>Country</label>
      <select [(ngModel)]='defaultValue' #country="ngModel" ngModel name="country" required  class="form-control">
          <option *ngFor="let value of values" [ngValue]="value">{{value}}</option>

      </select>
    <div *ngIf="country.value == 'Select Country' && f._submitted " class="alert alert-danger">
                  Country is required
              
    </div>
  </div>
    </div>
  </div>
<div class="row">
    <div class="col-sm">
      <div class="form-group">
    <label>Multi Select</label>
    <select multiple class="form-control"  #multiselect="ngModel" required ngModel name="multiselect">
      <option *ngFor="let value of digit" [ngValue]="value">{{value}}</option>
     
    </select>
 <div *ngIf="multiselect.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="multiselect.errors.required">
          Select from multiselect
         </div>
         
    </div>


   
  </div>
    </div>
    <div class="col-sm">
      <div class="form-group">
         <label for="exampleFormControlFile1">zip</label>
    <input #zip="ngModel" ngModel name="zip" required pattern="^[1-9][0-9]{5}$" class="form-control">


      <div *ngIf="zip.invalid && (zip.dirty || zip.touched) || zip.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="zip.errors.required">
            zip is required
         </div>
           <div *ngIf="zip.errors.pattern">
          Enter 6 digit postal code.
         </div>
    </div>

  </div>
    </div>
  
  </div>
<div class="row">
    <div class="col-sm">
    <div class="form-group">
    <label for="exampleFormControlTextarea1">Textarea</label>
    <textarea class="form-control" rows="3" #message="ngModel" ngModel name="message" required minlength="20"></textarea>

      <div *ngIf="message.invalid && (message.dirty || message.touched) || message.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="message.errors.required">
            Message is required
         </div>
           <div *ngIf="message.errors.minlength">
          Message should not be less than 20 character.
         </div>
    </div>
  </div></div></div>
  <div class="row">
    <div class="col-sm">
<div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" #tick="ngModel" ngModel name="tick" required class="form-check-input">
     Tick checkbox
    </label>
     <div *ngIf="tick.invalid && f._submitted " class="alert alert-danger">
         <div *ngIf="tick.errors.required">
          Select our term and condition.
         </div>
         
    </div>

  </div> </div> </div>
 <p>{{f.value | json}}
 <p>Form current status:  {{f.valid}}</p>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
app.component.cs

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   values:Array<string> = ['Select Country','India', 'Australia','Canada'];
   defaultValue = this.values[0];
   digit:Array<number> = [1,2,3,4,5,6];

onSubmit(f){
 if(f.valid){
  console.log(f.value)
 }

  
 
}
}

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *