@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

>
> . . .
>
>
>
> . . .
>