Native Angular 6+ Form Validation | ng-validators

ng-validators is a repository of native Angular 5+ form validators for both template-driven and interactive forms.

angular 8 form validation example, angular validators, form validation in angular, pattern validation in angular reactive form, angular form validation example

Table of Contents

Validators

Angular built-in validators

  •  required
  •  minlength
  •  maxlength
  •  pattern

Custom validators

  •  rangeLength
  •  min
  •  gt
  •  gte
  •  max
  •  lt
  •  lte
  •  range
  •  digits
  •  number
  •  url
  •  email
  •  date
  •  minDate
  •  maxDate
  •  dateISO
  •  creditCard
  •  json
  •  base64
  •  uuid
  •  equal
  •  notEqual
  •  equalTo
  •  notEqualTo

HTML 5 and Bootstrap Jquery Form Validation Plugin

How to make use of it:

Install:

npm install @ng-validators/ng-validators --save 

yarn add @ng-validators/ng-validators

1. Import only the validators that you need for your form.

import { greaterThan } from '@ng-validators/ng-validators';

this.formBuilder.group({
    age: ['', greaterThan(18)]
});

2. Import NgValidatorsModuleNgModule declarations.

import { NgValidatorsModule } from '@ng-validators/ng-validators';

@NgModule({
    imports: [NgValidatorsModule]
})
export class AppModule {
}

3. You can now use the validator directive in an HTML template.

<input class="form-control" type="text" ngModel name="gt" gt="10"/>

Angular 5+ Form Validators, ng-validators Plugin/Github, angular reactive forms, angular custom validator with parameter


See Demo And Download

Official Website(anjmao): Click Here

This superior jQuery/javascript plugin is developed by anjmao. For extra advanced usage, please go to the official website.

Related Posts

Iconpicker-Bootstrap-5

[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…

bootstrap-multiple-image-upload-with-preview

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…

Animating-Split-Flap-Displays-fallblatt

A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

jQuery-SyoTimer-Plugin

jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…

vue-js-periodic-table

Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…