The ngModel
directive binds an input
,select
, textarea
(or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
ngModel
is responsible for:
input
, textarea
or select
require.ng-valid
, ng-invalid
, ng-dirty
, ng-pristine
, ng-touched
, ng-untouched
) including animations.Note: ngModel
will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
For best practices on using ngModel
, see:
For basic examples, how to use ngModel
, see:
The following CSS classes are added and removed on the associated input/select/textarea element depending on the validity of the model.
ng-valid
is set if the model is valid.ng-invalid
is set if the model is invalid.ng-pristine
is set if the model is pristine.ng-dirty
is set if the model is dirty.Keep in mind that ngAnimate can detect each of these classes when added and removed.
Animations within models are triggered when any of the associated CSS classes are added and removed on the input element which is attached to the model. These classes are: .ng-pristine
, .ng-dirty
, .ng-invalid
and .ng-valid
as well as any other validations that are performed on the model itself. The animations that are triggered within ngModel are similar to how they work in ngClass and animations can be hooked into using CSS transitions, keyframes as well as JS animations.
The following example shows a simple way to utilize CSS transitions to style an input element that has been rendered as invalid after it has been validated:
//be sure to include ngAnimate as a module to hook into more //advanced animations .my-input { transition:0.5s linear all; background: white; } .my-input.ng-invalid { background: red; color:white; }
<input>
...
</input>
<script>
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = '1';
}]);</script><style>
.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}</style>
Update input to see transitions when valid/invalid.
Integer is a valid value.
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" /></form>
Sometimes it's helpful to bind ngModel
to a getter/setter function. A getter/setter is a function that returns a representation of the model when called with zero arguments, and sets the internal state of a model when called with an argument. It's sometimes useful to use this for models that have an internal representation that's different than what the model exposes to the view.
You use this behavior by adding ng-model-options="{ getterSetter: true }"
to an element that has ng-model
attached to it. You can also add ng-model-options="{ getterSetter: true }"
to a <form>
, which will enable this behavior for all <input>
s within it. See ngModelOptions
for more.
The following example shows how to use ngModel
with a getter/setter:
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ getterSetter: true }" />
</form>
<pre>user.name = <span ng-bind="user.name()"></span></pre></div>
angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var _name = 'Brian';
$scope.user = {
name: function (newName) {
if (angular.isDefined(newName)) {
_name = newName;
}
return _name;
}
};
}]);