@90s/ngx-form-utils

@90s/ngx-form-utils@0.0.1

This library helps to do common form functionalities

Install Package

Run npm install @90s/ngx-form-utils.

Import Module

Import NgxFormUtils module in app.module.ts file.

import { NgxFormUtilsModule } from '@90s/ngx-form-utils';

Add Module to the NgModule import section

@NgModule({ . . . imports: [ BrowserModule, NgxFormUtilsModule ], . . . }) export class AppModule { }

01. Control Error Component

This is used to show the Form Error Messages

Build Form Group

. . . constructor(private fb: FormBuilder) { this.userForm = this.fb.group({ name: [null, [Validators.required]], email: [null, [Validators.required, Validators.email]], address: this.fb.group({ street: [null, [Validators.required, Validators.minLength(5)]], city: [null, [Validators.required]], state: [null, [Validators.required]], pin: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(6)]] }) }); } . . .

Error Message

. . . errorMsg = { name: { required: 'Name is required.' }, email: { required: 'Email is required.', email: 'Invalid Email address.' }, address: { street: { required: 'Street is required.', minlength: 'Street should have minimun 5 letters.' }, city: { required: 'City is required.' }, state: { required: 'State is required.' }, pin: { required: 'Pin Code is required.', minlength: 'Should have 6 digits.', maxlength: 'Should have 6 digits.' } } }; . . .

Add Control Error Component with Form Elements

. . .

. . .

 <div>

   <label>Name</label>

   <input formControlName="name" type="email">

   <bj-control-error [control]="userForm" [path]="'name'" [message]="errorMsg.name"></bj-control-error>

 </div>

. . .

 <div>

   <label>Email</label>

   <input formControlName="email" type="email">

   <bj-control-error [control]="userForm.get('email')" [message]="errorMsg.email"></bj-control-error>

 </div>

. . .

. . .