The ng-model directive binds HTML elements to application data.
The ng-model directive can also:
Two-way binding
<div ng-app= "myApp" ng-controller= "Myctrl" >
Name: <input ng-model= "Name" >
</div>
Validating user input
<form ng-app= "" Name= "MyForm" >
Email:
<input type= "Email" name= "myAddress" ng-model= "text" >
<span ng-show= "myform.myaddress. $error. Email" > Not a valid email address </span>
</form>
Application Status
The Ng-model directive can provide status values for application data (invalid, dirty, touched, error):
<form ng-app= "" Name= "MyForm" ng-init= "myText = ' [email protected] ' >
Email:
<input type= "Email" name= "myAddress" ng-model= "MyText" required></p>
{{myform.myaddress. $valid}}
{{myform.myaddress. $dirty}}
{{myform.myaddress. $touched}}
</form>
Property |
Describe |
$dirty |
The form is filled with records |
$valid |
The contents of the field are valid |
$invalid |
The contents of the field are illegal |
$pristine |
form does not fill in records |
CSS classes
The Ng-model directives provide CSS classes for HTML elements based on their state:
<style>
Input.ng-invalid {
Background-color:lightblue;
}
</style>
<body>
<form ng-app= "" Name= "MyForm" >
Enter your name:
<input name= "myAddress" ng-model= "text" required>
</form>
The Ng-model directive adds/removes the following classes based on the state of the form field:
Ng-model directive
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
