Form Validation Monitor

This library was generated with Angular CLI version 11.1.2.

Description of the form-validation-monitor

This npm contains an Angular form validation monitor tool. (lk-form-validation-monitor)

The purpose of the Angular form validation monitor tool is, to show in realtime the angular validation result (status, valid, invalid) and validation signals (pristine, dirty, touched, untouched) with the FormControl, FormGroup, FormArray value eg. of the three fundamental building blocks (FormControl, FormGroup, FormArray) of Angular forms.

If the main form contains a complex building block eg. FormGroup or FormArray, the user if click on it, can recursively traverse the complex building block content.

Prerequisities is standard Template-Driven or Reactive (with former name model-driven) Angular forms.

Usage of the Form Validation Monitor selector: lk-form-validation-monitor

<lk-form-validation-monitor-v4 [mainFormGroup]="dataEntryForm" [topGap]="5" [fontSize]="1">

Where the

• mainFormGroup is the reference in the templae of the main form,
• topGap is the height of the gap in rem, between the UI of the Form Validation Monitor and other UI elements above
• fontSize is the numeric value the size of font in rem

<form (ngSubmit)="onSubmit(dataEntryForm)" #dataEntryForm="ngForm" novalidate autocomplete="off">

what we captured with ViewChild, eg.

@ViewChild('dataEntryForm', {static: true} ) dataEntryForm: NgForm | undefined;

Do not forget to import the FormValidationMonitorModule into that module which contains the main form.

Build

Run ng build form-validation-monitor to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build form-validation-monitor, go to the dist folder cd dist/form-validation-monitor and run npm publish.

Sources

Demo app source of the lk-form-validation-monitor

Library source of the lk-form-validation-monitor

Example UI. and the real life usage

The real life usage on the followin webpage