Welcome To Learn Today

        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

From: A form contains various input components like text, option, select option and pickers. This input component behavior is manipulated into Form.  A form is operated to two-way data binding , validation, event binding and error handling while submitting the form or inline validate. Template Driven form: A Template Driven Form creates a set angular structure based directives. Example: I create execute the following angular-CLI code:  ng g component tempdrivenfrm Now, the template driven component is created successfully.  We write a logic for the corresponding files. HTML: <form #usrfrm="ngForm" (ngSubmit)="userFormSubmit(usrfrm)"> <div class="form-group"> <div class="form-group">     <label>User Name</label>     <input type="text" #myNameRef="ngModel" required minlength="5" class="form-control" name="name" ngModel>  

        Consider angular 1 is a great feature for two-way data binding system. It's very helpful to access a variable in a directive and modifying value shows the user view or web view.          In this feature is not available in angular > 2.0 greater than version because of here not in a use of the directive structure. So In this feature will implement angular 2 means, we require to know the event and properties binding details. Properties binding: [] : -  The behind of the symbol to binding a property in HTML element of view page in angular 2. Example: <input type="text" name="firstname" [ngModel] = "firstName"> The above line of code is firstName value is to bind ngModel of an input element. Event Binding: () : - The behind of the sysmbol to binding an event in the included HTML element in angular 2. Example: <input type="text" name="firstname" [ngModel] = "firstName" (onClick)