README
@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>
. . .
. . .