ngx-input-validator

Input validator Angular reactive forms inputs.

Installation

NPM:

$ npm install ngx-input-validator

Usage:

import { Validator } from 'ngx-input-validator';

Component:

formGroup: FormGroup;

this.formGroup = _fb.group({
    emailInput: new FormControl('', [
        Validator.required,
        Validator.emailValidator
    ])
});

if(form.hasError('invalidEmailAddress')) {
    alert("Invalid Email");
}

HTML:

<form [formGroup]="formGroup">
  <input type="email" maxlength="50" FormControlName="emailInput" />
</form>

<div *ngIf="formGroup['controls']['emailInput'].hasError('invalidEmailAddress') && formGroup['controls']['emailInput'].touched" class="error">Invalid email.</div>

Features

Here are some useful input validators provided in this package:

• amountValidator

Works on AbstractControl, for validating amount as string, use validatePrice.

let amountInput: FormControl = new FormControl(0, [
    Validator.amountValidator,
]);

Returns { 'invalidAmount': true } if control value is invalid, otherwise in case of no error returns null.

• trimSpaces

To remove spaces from start and end of a string.

let value: string = Validator.trimSpaces("   String to be trim   ");

Returns trimmed value as String.

• validatePrice

For validating amount in dollars in form of string.

let priceInput: FormControl = new FormControl(0, [
    Validator.validatePrice,
]);

Returns true for valid amount and false for invalid amount value.

• validateJSON

Validates JSON string.

let jsonInput: FormControl = new FormControl('', [
    Validator.validateJSON,
]);

Returns true in case of valid stringified JSON, otherwise false.

• creditCardValidator

Works on AbstractControl, to validate Visa, MasterCard, American Express, Diners Club, Discover, JCB etc.. card number.

let creditCardInput: FormControl = new FormControl('', [
    Validator.creditCardValidator,
]);

Returns { 'invalidCreditCard': true } as error in case of invalid card number, otherwise null.

• emailValidator

For AbstractControl, enhanced form of basic email validator.

let emailInput: FormControl = new FormControl('', [
    Validator.emailValidator,
]);

Returns { 'invalidEmailAddress': true } as error in case of invalid email address, otherwise null.

• phoneValidator

For AbstractControl, validates 10 digit phone number which may includes hypens (-).

let phoneInput: FormControl = new FormControl(null, [
    Validator.phoneValidator,
]);

Returns { 'invalidPhoneNumber': true } as error in case of invalid phone number, otherwise null.

• mobileValidator

For AbstractControl, validates 8-15 digit phone number which includes 1-3 digit prefix number spearted by a hypen (-).

let phoneInput: FormControl = new FormControl(null, [
    Validator.phoneValidator,
]);

Returns { 'invalidPhoneNumber': true } as error in case of invalid phone number, otherwise null.

• imeiValidator

For AbstractControl, validates IMEI number.

let imeiInput: FormControl = new FormControl(null, [
    Validator.imeiValidator,
]);

Returns { 'invalidIMEINumber': true } as error in case of invalid IMEI number, otherwise null.

• vinValidator

For AbstractControl, validates vehicle VIN number.

let vinInput: FormControl = new FormControl(null, [
    Validator.vinValidator,
]);

Returns { 'invalidVinNumber': true } as error in case of invalid VIN number, otherwise null.

• url

For AbstractControl, validates http/https URL.

let urlInput: FormControl = new FormControl('', [
    Validator.url,
]);

Returns { 'invalidurl': true } as error in case of invalid http/https URL, otherwise null.

• passwordValidator

For AbstractControl, validates minimum 8 characters password which may include any character.

let passwordInput: FormControl = new FormControl(null, [
    Validator.passwordValidator,
]);

Returns { 'invalidPassword': true } as error in case of invalid password, otherwise null.

• ValidateFile

For AbstractControl, validates jpg, jpeg and png extension file.

let fileInput: FormControl = new FormControl(null, [
    Validator.ValidateFile,
]);

Returns { 'invalidImage': true } as error in case of invalid image, otherwise null.

• ValidatePngFile

For AbstractControl, validates png extension file.

let fileInput: FormControl = new FormControl(null, [
    Validator.ValidatePngFile,
]);

Returns { 'invalidImage': true } as error in case of invalid image, otherwise null.

• ageValidator

For AbstractControl, validates age between 0 to 119.

let ageInput: FormControl = new FormControl(0, [
    Validator.ageValidator,
]);

Returns { 'invalidAge': true } as error in case of invalid age year number, otherwise null.

• required

For AbstractControl, validates age between 0 to 119.

let requiredInput: FormControl = new FormControl(null, [
    Validator.required,
]);

Returns { required: true } as error in case of blank input, otherwise null.

• timeFormat

For AbstractControl, validates time in format of '{H}H:{M}M', where digits in {} are optional.

let timeInput: FormControl = new FormControl('', [
    Validator.timeFormat,
]);

Returns { 'invalidTimeFormat': true } as error in case valid time format, otherwise null.

• matchingPasswords

Matches two password inputs.

new FormBuilder().group({
      Password: new FormControl('', [
        Validators.required,
        Validator.passwordValidator,
      ]),
      ConfirmPassword: new FormControl('', [
        Validators.required,
        Validator.passwordValidator,
      ]),
    },
      {
        validator: matchingComparePasswords('Password', 'ConfirmPassword')
      });
  }

Returns { Equivalent: true } if password inputs match otherwise returns { notEquivalent: true }

Issues

If you find a bug, please file an issue on our issue tracker on GitHub.

Credits

Boring Devs