Angular 2 Form Validators
Angular 2 form validators by @AngularClass
Request a validator that is missing
Submit a Request and I will create it and include it here.
Installing
npm install --save @angularclass/form-validators
Directives
ac-is-credit-card
ac-is-base-64
ac-is-email
ac-is-json
ac-is-phone
ac-is-uuid
Example
import {
ANGULARCLASS_FORM_VALIDATOR_DIRECTIVES
} from '@angularclass/form-validators';
@Component({
selector: 'app',
directives: [
ANGULARCLASS_FORM_VALIDATOR_DIRECTIVES
],
template: `
<form>
<input ac-is-credit-card>
<input ac-is-base-64>
<input ac-is-email>
<input ac-is-json>
<input ac-is-phone>
<input ac-is-uuid>
</form>
`
})
class App {
}
Another example
import { Component } from '@angular/core';
@Component({
selector: 'about',
template: `
About
<form #form="ngForm" (ngSubmit)="onSubmit(form.value, form)" novalidate>
<div>
<label>
<input
#inputEmail="ngModel"
name="inputEmail"
[(ngModel)]="email"
ac-is-email
>
</label>
</div>
<div *ngIf="form.submitted && inputEmail?.errors?.isEmail" style="background-color: red">
Please use a valid email address
</div>
<button>Submit</button>
</form>
`
})
export class About {
localState = {
email: ''
};
onSubmit(value, form) {
if (form.valid) {
console.log('form value', value);
} else {
console.log('form invalid');
}
}
}
enjoy — AngularClass
##AngularClass
Learn AngularJS, Angular 2, and Modern Web Development from the best.
Looking for corporate Angular training, want to host us, or Angular consulting? hello@angularclass.com