ng-reactive-form-validator

Angular Reactive Form Validator

Description

Angular reactive form validators for Angular6 versions.

Installation

To install this component to an external project, follow the procedure:

1. npm install ng-reactive-form-validator --save

2. Add NgReactiveFormValidatorModule import to your @NgModule like example below

   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import { NgReactiveFormValidatorModule } from 'ng-reactive-form-validator';
   
   @NgModule({
       imports:      [ BrowserModule, NgReactiveFormValidatorModule ],
   	declarations: [ AppComponent ],
       bootstrap:    [ AppComponent ]
   })
   export class AppModule {}

3. If you are using systemjs package loader add the following mydatepicker properties to the System.config:

   (function (global) {
       System.config({
           paths: {
               'npm:': 'node_modules/'
           },
           map: {
               // Other components are here...
   
               'ng-date-format': 'npm:ng-reactive-form-validator/bundles/ng-reactive-form-validator.umd.min.js'
           },
           packages: {
           }
       });
   })(this);

Usage

Use one of the following two options.

Use in Component and HTML

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, ValidatorFn, AbstractControl } from '@angular/forms';
import { NgReactiveFormValidatorService } from 'ng-reactive-form-validator';

@Component({
	selector: 'app-profile-form',
	templateUrl: './profile-form.component.html',
	styleUrls: ['./profile-form.component.css']
})
export class ProfileFormComponent implements OnInit {

	public formObj: FormGroup;

	private _formErrorMessage = {
		firstName: {
			required: 'You have to mention first name'
		},
		lastName: {
			required: 'You have to mention last name'
		},
		email: {
			required: 'You have to mention email',
			email: 'Your email id is not valid'
		},
		phoneNo: {
			required: 'Phone no is required'
		},
		cardNo: {
			required: 'Card no is required',
			cardLength: 'Please enter 16 digits card no',
		}
	};
	public formError: any = {};

	constructor(
		public formBuilder: FormBuilder,
		public validatorService: NgReactiveFormValidatorService
	) { }

	ngOnInit() {
		this.formObj = this.formBuilder.group({
			firstName: [null, Validators.required],
			middleName: [null, Validators.required],
			lastName: [null, Validators.required],
			email: [null, [Validators.required, Validators.email]],
			phoneNo: [null, Validators.required],
			cardNo: [null, [Validators.required, this.cardLength(16, 16)]]
		});
	}

	cardLength(min: number, max: number): ValidatorFn {
		return (control: AbstractControl): { [key: string]: boolean } | null => {
			if (control.value !== undefined) {
				if (control.value !== null) {
					if ( (control.value.toString().length < min) ||
					(control.value.toString().length > max) ) {
						return { 'cardLength': true };
					} else {
						return null;
					}
				} else {
					return null;
				}
			}
			return null;
		};
	}

	saveForm() {
		if (this.formObj.valid) {
			console.log(this.formObj.value);
		} else {
			this.formError = this.validatorService.validationError(this.formObj, this._formErrorMessage);
		}
	}

}

<form [formGroup]="formObj" (submit)="saveForm()">
	<div class="panel">
		<div class="panel-heading">
			<h3 class="text-center">Profile Form</h3>
		</div>
		<div class="panel-body">
			<div class="row">
				<div class="col">
					<div class="form-group">
						<label class="col-form-label">First Name</label>
						<input type="text" formControlName="firstName" class="form-control">
						<div class="form-validation-error" *ngIf="formError?.firstName">
							<span *ngFor="let err of formError?.firstName">{{err?.message}}</span>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="form-group">
						<label class="col-form-label">Middle Name</label>
						<input type="text" formControlName="middleName" class="form-control">
						<div class="form-validation-error" *ngIf="formError?.middleName">
							<span *ngFor="let err of formError?.middleName">{{err?.message}}</span>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="form-group">
						<label class="col-form-label">Last Name</label>
						<input type="text" formControlName="lastName" class="form-control">
						<div class="form-validation-error" *ngIf="formError?.lastName">
							<span *ngFor="let err of formError?.lastName">{{err?.message}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="form-group">
						<label for="" class="col-form-label">Email</label>
						<input type="text" formControlName="email" class="form-control">
						<div class="form-validation-error" *ngIf="formError?.email">
							<span *ngFor="let err of formError?.email">{{err?.message}}</span>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="form-group">
						<label for="" class="col-form-label">Phone</label>
						<input type="text" formControlName="phoneNo" class="form-control">
						<div class="form-validation-error" *ngIf="formError?.phoneNo">
							<span *ngFor="let err of formError?.phoneNo">{{err?.message}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="form-group">
						<label for="" class="col-form-label">Card No.</label>
						<input type="number" formControlName="cardNo" class="form-control">
						<div class="form-validation-error" *ngIf="formError?.cardNo">
							<span *ngFor="let err of formError?.cardNo">{{err?.message}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="panel footer">
			<div class="form-group">
				<button class="btn btn-primary" type="submit">Submit</button>
			</div>
		</div>
	</div>
</form>

License

• License: MIT

Author

• Author: SUVOJIT SEAL

Keywords

• Reactive Form Validator
• Angular V6