Skip to content

Instantly share code, notes, and snippets.

@debuging-life

debuging-life/costom-form-component.html

Created June 26, 2016 19:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save debuging-life/0ea79ae88c7f051dcc34ab3be2e1fd75 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save debuging-life/0ea79ae88c7f051dcc34ab3be2e1fd75 to your computer and use it in GitHub Desktop.
Download ZIP
custom-form-validations
Raw
costom-form-component.html
<div class="jumbotron">
<h1>{{ data.title }}</h1>
<p>{{ data.description }}</p>
<form [ngFormModel]="gpForm">
<div class="form-group">
<labe for="firstName" id="firstName">First Name</labe>
<input type="text"
class="form-control"
id="firstName"
ngControl="firstName"
#firstName="ngForm"
minlength="3"
required>
<div *ngIf="firstName.touched && firstName.errors">
<div
*ngIf="firstName.errors.required"
class="alert alert-danger">
Please Enter First Name.
</div>
<div
*ngIf="firstName.errors.minlength"
class="alert alert-danger">
First Name Should Be Minimum 3 Characters
</div>
</div>
</div>
<div class="form-group">
<labe for="lastName" id="lastName">Last Name</labe>
<input type="text"
class="form-control"
id="lastName"
ngControl="lastName"
minlength="3"
#lastName="ngForm"
required>
<div *ngIf="lastName.touched && lastName.errors">
<div
*ngIf="lastName.errors.required"
class="alert alert-danger">
Please Enter Last Name.
</div>
<div
*ngIf="lastName.errors.minlength"
class="alert alert-danger">
Last Name Should Be Minimum 3 Characters
</div>
</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="username" id="username">Username</labe>
<input type="text"
class="form-control"
id="username"
ngControl="username"
#username="ngForm"
required>
<div *ngIf="username.touched && username.errors">
<div
*ngIf="username.errors.required"
class="alert alert-danger">
Please Enter Last Name.
</div>
<div
*ngIf="username.errors.cannotContainSpace"
class="alert alert-danger">
Username Cannot Contain Space.
</div>
</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>
<a style="float:right;" class="btn btn-primary" target="_blank" href="https://gist.github.com/pardipbhatti9187/ee14179bf64c3c63ee5389388abb3376">Get Script</a>
</div>
Raw
custom-form-validation.component.ts
import { Component } from '@angular/core';
import { ControlGroup, Control, Validators, FormBuilder, FORM_DIRECTIVES } from '@angular/common';
import { CustomValidators } from './custom-validators';
@Component({
selector: "custom-form-validations",
templateUrl: "app/custom-form-validations/views/angular-form.component.html",
directives: [FORM_DIRECTIVES]
})
export class CustomFormValidationComponent {
gpForm = ControlGroup;
// This technique called model drive form
// gpForm = new ControlGroup({
// firstName: new Control('', Validators.required),
// lastName: new Control('', Validators.required),
// email: new Control('', Validators.required),
// username: new Control('', Validators.compose([Validators.required, CustomValidators.cannotContainSpace])),
// password: new Control('', Validators.required)
// });
constructor(fb: FormBuilder) {
this.gpForm = fb.group({
firstName:['', Validators.required],
lastName:['', Validators.required],
email:['', Validators.required],
username:['', Validators.compose([
Validators.required,
CustomValidators.cannotContainSpace
])],
password:['', Validators.required]
});
}
data = {
title: "Custom Validation Form",
description: "Implment Angular 2 Custom Validations"
}
}
Raw
custom-validators.ts
import { Control } from '@angular/common';
export class CustomValidators {
static cannotContainSpace(control: Control) {
if(control.value.indexOf(' ') >= 0) {
return { cannotContainSpace: true };
}
return null;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment