Loading
 
What's Next: View All Tutorial →

Angular JS 2 - Form with validation using Template Driven approach

A sample program to demonstrate the template driven approach using the (ngSubmit) and ([ngModel]) two way binding Live running example. Click here https://plnkr.co/edit/y9uF5ugysfn1dwfRuO32?p=preview   Program: app/appcomponent.ts ...

Published Date: 11/12/2016  Last Modified Date: 11/12/2016    New Post





A sample program to demonstrate the template driven approach using the (ngSubmit) and ([ngModel]) two way binding

Live running example. Click here

https://plnkr.co/edit/y9uF5ugysfn1dwfRuO32?p=preview
 

Program:

app/appcomponent.ts

Add the template and the styles in the same component. 
 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  
  <div class="container">
  
  
  
  <div  [hidden]="submitted">
    <h1>Hero Form</h1>
    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel" >
        <div [hidden]="name.valid || name.pristine"
             class="alert alert-danger">
          Name is required
        </div>
      </div>
      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control" id="alterEgo"
               [(ngModel)]="model.alterEgo" name="alterEgo" >
      </div>
      <div class="form-group">
        <label for="power">Hero Power</label>
        <select class="form-control" id="power"
                required
                [(ngModel)]="model.power" name="power"
                #power="ngModel" >
          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
        </select>
        <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
          Power is required
        </div>
      </div>
      <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
    </form>
  </div>
  <div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-9  pull-left">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Alter Ego</div>
      <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Power</div>
      <div class="col-xs-9 pull-left">{{ model.power }}</div>
    </div>
    <br>
    <button class="btn btn-default" (click)="submitted=false">Edit</button>
  </div>
</div>

{{model }}
  
  {{model | json}}

`,
styles: [
  `.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}
`
  ]
})
export class AppComponent {
  
  name = 'Angular'; 
  powers = ['Really Smart', 'Super Flexible','Super Hot', 'Weather Changer'];
  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
  submitted = false;
  onSubmit() { this.submitted = true; }
  newHero() {
    this.model = new Hero(42, '', '');
  }
  
}




export class Hero {
  constructor(
    public id: number,
    public name: string,
    public power: string,
    public alterEgo?: string
  ) {  }
}

Things to know:

Hero - this class act as a model object to store the form field value


<form (ngSubmit)="onSubmit()" #heroForm="ngForm">   - Here (ngSubmit) to handle the form submit event. & #heroForm is a refrence variable of ngForm
 

heroForm.reset() - helps to reset the form field as it binds to ngForm

heroForm.form.valid - return true, if the validation is true


 
<input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel" >


[(ngModel)] - It is used for two way binding, Here the name object in the model is mapped to that

#name="ngModel" - local reference pointing to ngModel and is useful for validateion 



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

@NgModule({
  imports:      [ BrowserModule,FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Things to know:

FormsModule need to be important in the NgModule
 

Program Execution



Live running example. Click here

https://plnkr.co/edit/y9uF5ugysfn1dwfRuO32?p=preview
 

 






 
Awaiting for Administrator approval





Tags: Form

← Back to list


Related Post




×