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>