Control state and validity with ngModel in angular2

        A ng-model is a form input property to two-way bind in a form control model. We are declared n number of ng-models, This model requires a validation for directive and component side also. Most of the user experience is apply with in directive because of didn't ready to waste the time to submit a form and validate in server side.

       In line validation, the very important role is played in angular and bootstrap framework. This form validation is declared a mandatory property in mg-model means bootstrap is binding in a directive for a hash class in angular.

Form Validation states:

State	Class if true	Class if false
The control has been visited.	ng-touched	ng-untouched
The control's value has changed.	ng-dirty	ng-pristine
The control's value is valid.	ng-valid	ng-invalid

Example:

<input type="text" #myNameRef="ngModel" required minlength="5" class="form-control" name="name" ngModel>

        <!-- avaialble input validation class names -->

        <{{myNameRef.className}}

Here is show the state of the validation is available in bootstrap validation classes shown.

Other Example:

<div *ngIf=" myNameRef.errors && (myNameRef.dirty || myNameRef.touched)">

            <div [hidden]=" !myNameRef.errors.required ">

                Please enter the name

            </div>

            <div [hidden]=" !myNameRef.errors.minlength ">

                Please enter minum 5 character

            </div>

        </div>