Angular can use directives to seamlessly enhance the functionality of standard form elements, we will discuss its advantages, including:
Data binding, building model properties, validating forms, validating forms, feedback, form instruction Properties
Let's use the case to verify their usage:
One, bidirectional data binding (Ng-model) and building model properties
<! DOCTYPE>
<!-use module->
<html ng-app = "exampleApp">
<head>
<title> Angular Directive </ title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css">
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap-theme.min.css">
</ head>
<body>
<!-Case: Two-way data binding->
<div class = "panel" ng-controller = "defaultCtrl">
<!-Filter items with complete false->
<h3 class = "panel-header"> To Do List <span class = "label label-info"> {{(todos | filter: {complete: 'false'}). length}} </ span> </ h3 >
<div class = "row-fluid">
<div class = "col-xs-6">
<div class = "form-group row">
<label for = "action"> Action: </ label>
<!-ng-model two-way binding->
<!-Two-way data binding: Two-way binding between data model (Module) and view (View). ->
<!-When one of them sends a replacement, the other changes too->
<input type = "text" id = "action" ng-model = "newToDo.action" class = "form-control">
</ div>
<div class = "form-group row">
<label for = "location"> Location: </ label>
<select id = "location" class = "form-control" ng-model = "newToDo.location">
<option> Home </ option>
<option> Office </ option>
<option> Mall </ option>
</ select>
</ div>
<!-ng-click Click Add to add an item->
<button class = "btn btn-primary btn-block" ng-click = "addNewItem (newToDo)"> Add </ button>
</ div>
<div class = "col-xs-6">
<table class = "table table-bordered table-striped">
<thead>
<tr> <th> # </ th> <th> Action </ th> <th> Done </ th> </ tr>
</ thead>
<tbody>
<tr ng-repeat = "item in todos">
<!-$ index defaults to 0, increasing->
<td> {{$ index + 1}} </ td>
<td> {{item.action}} </ td>
<td>
<input type = "checkbox" ng-model = "item.complete" />
</ td>
</ tr>
</ tbody>
</ table>
</ div>
</ div>
</ div>
<script type = "text / javascript" src = "js / angular.min.js"> </ script>
<script type = "text / javascript">
// define a module named exampleApp
angular.module ("exampleApp", [])
// define a controller named defaultCtrl
.controller ('defaultCtrl', function ($ scope) {
// data model
$ scope.todos = [
{action: "play ball", complete: false},
{action: "singing", complete: false},
{action: "running", complete: true},
{action: "dance", complete: true},
{action: "swimming", complete: false},
{action: "eating", complete: false},
];
// add data to the model
$ scope.addNewItem = function (newItem) {
// determine if it exists
if (angular.isDefined (newItem) && angular.isDefined (newItem.action) && angular.isDefined (newItem.location)) {
$ scope.todos.push ({
action: newItem.action + "(" + newItem.location + ")",
complete: false
})
}
}
})
</ script>
</ body>
</ html>
First defines the data model Scope.todos and the AddNewItem () method that adds data to the model, and then uses bidirectional data binding Ng−model to bind the action and location of the form in the view to the Scope.todos in the model.
Finally, the AddNewItem () method of adding data to the model is triggered through the Ng-click click Attribute to complete the operation
Second, verify the form
before we submit our form to the server, we need to check that the data submitted by the user is present or legitimate, otherwise submitting useless data will waste resources.
<! DOCTYPE>
<!-use module->
<html ng-app = "exampleApp">
<head>
<title> Angular Directive </ title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css">
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap-theme.min.css">
<style>
</ style>
</ head>
<body>
<div id = "todoPanel" class = "panel" ng-controller = "defaultCtrl">
<!-novalidate means to abandon browser form verification and use NG's own verification->
<!-ng-submit = `` addUser (newUser) When form data is valid, submit data to the model->
<form name = "myForm" novalidate ng-submit = "addUser (newUser)">
<div class = "well">
<div class = "form-group">
<label> Name: </ label>
<!-required form this form is required->
<!-ng-model = "newUser.name" two-way data binding->
<input name = "userName" type = "text" class = "form-control" required ng-model = "newUser.name">
</ div>
<div class = "form-group">
<label> Email: </ label>
<input name = "userEmail" type = "email" class = "form-control" required ng-model = "newUser.email">
</ div>
<div class = "checkbox">
<label>
<input name = "agreed" type = "checkbox" ng-model = "newUser.agreed" required>
I agree to the terms and conditions
</ label>
</ div>
<!-g-disabled = "myForm. $ invalid" The submit button is unavailable when any of the previously filled out forms is invalid->
<button type = "submit" class = "btn btn-primary btn-block" ng-disabled = "myForm. $ invalid">
OK
</ button>
</ div>
<div class = "well">
Message: {{message}}
<div>
Valid: {{myForm. $ Valid}}
</ div>
</ div>
</ form>
</ div>
<script type = "text / javascript" src = "js / angular.min.js"> </ script>
<script type = "text / javascript">
angular.module ("exampleApp", [])
.controller ("defaultCtrl", function ($ scope) {
// Add user data to the model $ scope.message
$ scope.addUser = function (userDetails) {
$ scope.message = userDetails.name
+ "(" + userDetails.email + ") (" + userDetails.agreed + ")";
}
// show results before and after verification
$ scope.message = "Ready";
});
</ script>
</ body>
</ html>
First, the data model Scope.message and the AddUser () method to add data to the model are defined, and then the table cell element validate is added to the view. The Name property and the Ng−submit property then use bidirectional data binding Ng−model to bind the action of the form in the view and the Scope.todos of the location and the model, using the validation properties required and the email form
The Submit button is then disabled and is disabled only if the form data is all valid and illegal (ng-disabled= "myForm. $invalid")
Finally, the AddUser () method of submitting the data to the model through the Ng-submit property completes the operation
Third, form validation feedback information
It's not enough that we just validate the form, because users don't know why they're wrong, so we need feedback to the user so they know what to fill out.
Let's first introduce the classes to be validated in Ng.
Ng-pristine user does not have interactive elements to be added to this class
Ng-dirty The user interacts with the element is added to this class
ng-valid Validation Results Valid elements are added to this class
ng-invalid Validation Result Invalid element added to this class
<! DOCTYPE>
<!-use module->
<html ng-app = "exampleApp">
<head>
<title> Angular Directive </ title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css">
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap-theme.min.css">
<style>
/ * Interactive and required style * /
form.validate .ng-invalid-required.ng-dirty {
background-color: orange;
}
/ * Interactive illegal style * /
form .ng-invalid.ng-dirty {
background-color: lightpink;
}
/ * Mail is illegal and interactive * /
form.validate .ng-invalid-email.ng-dirty {
background-color: lightgoldenrodyellow;
}
div.error {
color: red;
font-weight: bold;
}
div.summary.ng-valid {
color: green;
font-weight: bold;
}
div.summary.ng-invalid {
color: red;
font-weight: bold;
}
</ style>
</ head>
<body>
<!-Case: Two-way data binding->
<div class = "panel" ng-controller = "defaultCtrl">
<!-novalidate = "novalidate" Only NG form validation->
<!-ng-submit = "addUser (newUser)" Add data to the model->
<!-ng-class = "showValidation? 'validate': '' When validation is valid, showValidation is true, which is triggering ng-class to validate->
<form name = "myForm" class = "well" novalidate = "novalidate" ng-submit = "addUser (newUser)" ng-class = "showValidation? 'validate': ''">
<div class = "form-group">
<div class = "form-group">
<label> Email: </ label>
<input name = "email" type = "email" class = "form-control" required = "required" ng-model = "newUser.email">
<!-Verification prompt->
<div class = "error">
<!-Show feedback->
<span ng-class = "error" ng-show = "showValidation">
{{getError (myForm.email. $ error)}}
</ span>
</ div>
</ div>
<button type = "submit" class = "btn btn-primary btn-block"> OK </ button>
<div class = "well">
Message: {{message}}
<!-When myForm. $ Valid is valid, showValidation is true, which triggers ng-class to be ng-valid, otherwise, ng-invalid->
<div class = "summary" ng-class = "myForm. $ valid? 'ng-valid': 'ng-invalid'">
Valid: {{myForm. $ Valid}}
</ div>
</ div>
</ form>
</ div>
<script type = "text / javascript" src = "js / angular.min.js"> </ script>
<script type = "text / javascript">
// define a module named exampleApp
angular.module ("exampleApp", [])
// define a controller named defaultCtrl
.controller ('defaultCtrl', function ($ scope) {
// add data to the model
$ scope.addUser = function (userDetails) {
if (myForm. $ valid) {
$ scope.message = userDetails.name + "(" + userDetails.email + ") (" + userDetails.agreed + ")";
} else {
$ scope.showValidation = true;
}
}
// data model
$ scope.message = "Ready";
// error feedback
// When the information is not filled in, please enter a value
// When verification fails, please enter a valid email address
$ scope.getError = function (error) {
if (angular.isDefined (error)) {
if (error.required) {
return "Please enter a value";
} else if (error.email) {
return "Please enter a valid email address";
}
}
}
})
</ script>
</ body>
</ html>
First, define the style of feedback, the style of form validation in style
Then write the feedback information when the error is written in JS
Finally bind Ng-class in the view
Four, form instruction attribute
1. Use the INPUT element
<! DOCTYPE>
<!-use module->
<html ng-app = "exampleApp">
<head>
<title> Angular Directive </ title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css">
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap-theme.min.css">
<style>
</ style>
</ head>
<body>
<div class = "panel" id = "todoPanel" ng-controller = "defaultCtrl">
<form name = "myForm" novalidate = "novalidate">
<div class = "well">
<div class = "form-group">
<label> Text: </ label>
<!-ng-required = "requireValue" required value through data binding->
<!-ng-minlength = "3" ng-maxlength = "10" maximum and minimum characters allowed->
<!-ng-pattern = "matchPattern" regular match->
<input name = "sample" class = "form-control" ng-model = "inputValue" ng-required = "requireValue" ng-minlength = "3"
ng-maxlength = "10" ng-pattern = "matchPattern">
</ div>
</ div>
<div class = "well">
<!-Required->
<p> Required Error: {{myForm.sample. $ error.required}} </ p>
<!-Min max length->
<p> Min Length Error: {{myForm.sample. $ error.minlength}} </ p>
<p> Max Length Error: {{myForm.sample. $ error.maxlength}} </ p>
<!-Matches only lowercase letters->
<p> Pattern Error: {{myForm.sample. $ error.pattern}} </ p>
<!-Verify legal->
<p> Element Valid: {{myForm.sample. $ valid}} </ p>
</ div>
</ form>
</ div>
<script type = "text / javascript" src = "js / angular.min.js"> </ script>
<script type = "text / javascript">
// define a module named exampleApp
angular.module ("exampleApp", [])
// define a controller named defaultCtrl
.controller ('defaultCtrl', function ($ scope) {
$ scope.requireValue = true;
$ scope.matchPattern = new RegExp ("^ [a-z]");
})
</ script>
</ body>
</ html>
2. SELECT list
<! DOCTYPE>
<!-use module->
<html ng-app = "exampleApp">
<head>
<title> Angular Directive </ title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css">
<link rel = "stylesheet" type = "text / css" href = "css / bootstrap-theme.min.css">
<style>
</ style>
</ head>
<body>
<div class = "panel" id = "todoPanel" ng-controller = "defaultCtrl">
<form name = "myForm" novalidate = "novalidate">
<div class = "well">
<div class = "form-group">
<label> Selection an action: </ label>
<!-Traverse the list Sort by item.place item.id as item.action Change the option value->
<!-ng-options = "item.id as item.action group by item.place for item in todos"->
<select ng-model = "selectValue" ng-options = "item.id as item.action group by item.place for item in todos">
<option value = "" class = ""> (Pick One) </ option>
</ select>
</ div>
</ div>
<div class = "well">
<p> Selected: {{selectValue || "None"}} </ p>
</ div>
</ form>
</ div>
<script type = "text / javascript" src = "js / angular.min.js"> </ script>
<script type = "text / javascript">
// define a module named exampleApp
angular.module ("exampleApp", [])
// define a controller named defaultCtrl
.controller ('defaultCtrl', function ($ scope) {
// model data
$ scope.todos = [
{id: 100, place: "School", action: "play ball", complete: false},
{id: 200, place: "Home", action: "eating", complete: false},
{id: 300, place: "Home", action: "watch TV", complete: true}
];
})
</ script>
</ body>
</ html>
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
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
