AngularJs ng-model Directive

Tuesday, February 2nd, 2016 (0 Comment)

1. What is angularJs ng-model Directive ?

AngularJs ng-model Directive (ngModel) is a directive used to link the data with the client, it is often used for user input, so we often use the html FORM. AngularJs ng-model Directive has also been introduced in the previous examples.

In this article we will learn more detail about ng-model. ng-model Directive would link to a property of Scope use ngModelController (initiated by ng-model). ng-model often used in combination with ng-bind (we can understand simply is data used to link the ng-model Directive, ng-bind more advanced we will learn in the next article).

2. The CSS default added in AngularJs ng-model

  • ng-valid: the model is valid
  • ng-invalid: the model is invalid
  • ng-valid-[key]: for each valid key added by $setValidity
  • ng-invalid-[key]: for each invalid key added by $setValidity
  • ng-pristine: the control hasn’t been interacted with yet
  • ng-dirty: the control has been interacted with
  • ng-touched: the control has been blurred
  • ng-untouched: the control hasn’t been blurred
  • ng-pending: any $asyncValidators are unfulfilled
  • ng-empty: the view does not contain a value or the value is deemed “empty”, as defined by the ngModel.NgModelController method
  • ng-not-empty: the view contains a non-empty value

Example 1: use ng-model Directive to build html form and check data entered input is the number, if not number then display black background in input tag

Demo

  • Line 14: declare ng-model=”val” and ng-pattern=”/^\d+$/”. When loading page, the ng-model Directive saw using pattern so declare data entered will be validated by this pattern. You need research more advanced Regular Expression to known about this pattern.

If you want to check required input data into input tag you add “required” word before name=”main”.

Example 2: Create two html input and the user enters two numbers, validate mandatory input and simultaneously output the results screen mathematical operations addition, subtraction, multiplication, and division of two of them.

Demo

  • Line 13: Create the number input with the number type and set ng-pattern is integer
  • Line 15: Create the number input with a maximum of 2 decimal places and with a dot and set ng-pattern is float

Output:

 

Tags: , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

Your email address will not be published. Required fields are marked *