Quicker Angular Forms Validation – I Write Code Sometimes

  • Then in the component with the Form that you want to add validation to, add the FormBuilder, and the FormGroup providers.
  • Never miss a story from I Write Code Sometimes , when you sign up for Medium.
  • So in light of this, I updated my Open Source Project, angular validators, to ng-validators.
  • npm install –save ng-validators
  • ng-validators is a wrapper around the widely known validator js library, and since I didn’t feel like rewriting validation that already existed out there, I did this.

The community is moving away from calling Angular by version names, Angular 2, Angular 4 and the likes. It’s now just Angular, mainly because of the clear 6 months release cycles recently mentioned…

@ng_real_ninja: Quicker Angular Forms Validation

#javascript #technology #angularjs

The community is moving away from calling Angular by version names, Angular 2, Angular 4 and the likes. It’s now just Angular, mainly because of the clear 6 months release cycles recently mentioned.

So in light of this, I updated my Open Source Project, angular validators, to ng-validators. I was surprised that name was available, because there are a couple of validators out there, you can pick whichever you want.

ng-validators is a wrapper around the widely known validator js library, and since I didn’t feel like rewriting validation that already existed out there, I did this.

As of now, it only supports ReactiveFormsModule. FormsModule directives will be written some day, by me, or another open sourcerer.

Using it is quite simple.

Install it in your angular project with either npm or yarn

or

Once done, make sure you have the ReactiveFormsModule included in your app.modules.ts file.

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { ReactiveFormsModule } from ‘@angular/forms’;

import { HttpModule } from ‘@angular/http’;

import { AppComponent } from ‘./app.component’;

declarations: [

imports: [

providers: [],

bootstrap: [AppComponent]

Then in the component with the Form that you want to add validation to, add the FormBuilder, and the FormGroup providers. While, at it, add the ng-validators too.

import { Component } from ‘@angular/core’;

import { FormGroup, FormBuilder } from ‘@angular/forms’;

import { NGValidators } from ‘ng-validators’;

Then now, create a Model Based form, as you would normally.

import { Component } from ‘@angular/core’;

import { FormGroup, FormBuilder } from ‘@angular/forms’;

import { NGValidators } from ‘ng-validators’;

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’]

theForm: FormGroup;

contains: [”, [NGValidators.contains(‘validate’)]],

equals: [”, [NGValidators.equals(‘validate’)]],

after: [”, [NGValidators.isAfter()]],

alpha: [”, [NGValidators.isAlpha()]],

email: [”, [NGValidators.isEmail()]]

Templating for this should be intuitive if you’ve done a little of angular forms. I added a bootstrap CDN in my index file, then used the classes to update write the template below.

So, I have all the validators provided by validator js, wrapped in this simple module.

Quicker Angular Forms Validation – I Write Code Sometimes