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',
  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 {
}

@NgModule({
  bootstrap: [
    App
  ],
  declarations: [
    App,
    ...ANGULARCLASS_FORM_VALIDATOR_DIRECTIVES
  ],
  imports: [
    BrowserModule,
    FormsModule
  ]
})
export default class AboutModule {

}

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