Form Validation Monitor V4

This library was generated with Angular CLI version 1.4.10

Description of the form-validation-monitor-v4

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

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-v4

<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, for example see below

@ViewChild('dataEntryForm') dataEntryForm: NgForm;

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

Build

Run ng build form-validation-monitor-v4 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-v4, go to the dist folder cd dist/form-validation-monitor-v4 and run npm publish.

Compatibility

Angular version 4.22 or above.

Example UI. and the real life usage

Can check the real life usage of the form-validation-monitor-v4 tool on this URL