pardipbhatti8791
6/26/2016 - 5:19 PM

angular-form-validations

angular-form-validations

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

@Component({
    selector: "angular-form-validations",
    templateUrl: "app/angular-form-validations/views/angular-form.component.html"
})

export class AngularFormComponent {
    data = {
        title: "Basic Validation Form",
        description: "Implment Default Angular 2 Validations"
    }
}
 
 
 <div class="jumbotron">
     <h1>{{ data.title }}</h1>
     <p>{{ data.description }}</p>
     <form #gpForm="ngForm">
         <div class="form-group">
             <labe for="firstName" id="firstName">First Name</labe>
             <input type="text" 
                class="form-control" 
                id="firstName" 
                ngControl="firstName"
                #firstName="ngForm"
                required>
                <div *ngIf="firstName.touched && !firstName.valid" class="alert alert-danger">
                    Please Enter First Name.
                </div>
         </div>
         <div class="form-group">
             <labe for="lastName" id="lastName">Last Name</labe>
             <input type="text" 
                class="form-control" 
                id="lastName"
                ngControl="lastName"
                #lastName="ngForm" 
                required>
                <div *ngIf="lastName.touched && !lastName.valid" class="alert alert-danger">
                    Please Enter Last Name.
                </div>
         </div>
         <div class="form-group">
             <labe for="email" id="email">Email</labe>
             <input type="email" 
                class="form-control" 
                id="email" 
                ngControl="email"
                #email="ngForm" 
                required>
                <div *ngIf="email.touched && !email.valid" class="alert alert-danger">
                    Please Enter Your Email.
                </div>
         </div>
         <div class="form-group">
             <labe for="password" id="password">Password</labe>
             <input type="password" 
                class="form-control" 
                id="password" 
                ngControl="password"
                #password="ngForm" 
                required>
                 <div *ngIf="password.touched && !password.valid" class="alert alert-danger">
                    Please Enter Your Password.
                </div>
         </div>
         <button type="submit" class="btn btn-primary" [disabled]="!gpForm.valid">Submit</button>
     </form>
</div>