Mais conteúdo relacionado Semelhante a Forms in AngularJS (20) Forms in AngularJS1. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
2. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
3. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
<form name="myform" class="css-form" novalidate>
disable browser's native
form validation
Name: <input type="text" ng-model="user.name"/>
E-mail:<input type="email" ng-model="user.email" required/>
Gender:
<input type="radio" ng-model="user.gender" value="male"/> male
<input type="radio" ng-model="user.gender" value="female"/> female
</form>
<button ng-click="reset()"
ng-disabled="isUnchanged(user)">
RESET
</button>
<button ng-click="update(user)"
ng-disabled=“myform.$invalid || isUnchanged(user)">
SAVE
</button>
validation
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {background-color: #FA787E;}
.css-form input.ng-valid.ng-dirty {background-color: #78FA89;}
</style>
Binding the input
element to scope
property
4. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
<!-- Expressions -->
Please type your name : {{name}}
<!-- Directives & Data Binding -->
Name: <input ng-model="name" value="..." />
Template
name :
Scope
value
elm.bind('keydown', … )
$scope.$watch('name', … )
Directive
5. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
Form
Name
Email
Age
Submit function
Reset function
Scope
Binding
Proxies
Server
6. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
Data Binding
7. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
8. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
ng-model-options="{
updateOn: 'default blur',
debounce: {'default': 500, 'blur': 0}
}"
9. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
10. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
11. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
Types
Text
Checkbox
File
Password
Email
URL
Number
Range
Date
Validations
novalidate
Required
Pattern
Minlength
Maxlength
Min
Max
Status
$error
$pristine
$dirty
$valid
$invalid
$touched
$untouched
$pending
CSS
ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched
ng-pending
Events
ng-click
ng-change
ng-submit
12. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
<input type="checkbox"
ng-model="{string}"
[name="{string}"]
[ng-true-value="{string}"]
[ng-false-value="{string}"]
[ng-change="{string}"]>
<input type="email"
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]>
<input type="number"
ng-model="{string}"
[name="{string}"]
[min="{string}"]
[max="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]
[ng-change="{string}"]> <input type="radio"
ng-model="{string}"
value="{string}"
[name="{string}"]
[ng-change="{string}"]>
<input type="text" | type="URL"
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]
[ng-change="{string}"]>
13. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
Form
$error
$pristine
$dirty
$pending
NgModelController
<button
ng-click="update(user)"
ng-disabled="form.$invalid || isUnchanged(user)">
SAVE
</button>
<span
ng-show="f.uEmail.$dirty && f.uEmail.$invalid">
Invalid:
<span ng-show="form.uEmail.$error.email">
This is not a valid email.</span>
</span>
NgModelController
ng-model
$valid
$invalid
$submitted
$error
$pristine
$dirty
$pending
$valid
$invalid
14. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
Form Validations
15. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
16. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
$async
Validators
$parsers
$modelValue
ngModelController
$validators
$async
Validators
$validators
$format
ters
$view
Change
Listeners$render
Status
$error
$pristine
$dirty
$valid
$invalid
$touched
$untouched
$pending
$viewValue
$$lastCommittedViewValue
$commitViewValue
$rollbackViewValue
$$debounce
ViewValue
Commit
$setView
Value
17. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
18. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
ngModelController
($pristine, $dirty, $error, $valid, $invalid )
$setValidity()$setPristine()
<style type="text/css">
input.ng-invalid.ng-dirty {background-color: #FA787E;}
input.ng-valid.ng-dirty {background-color: #78FA89;}
</style>
19. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
app.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// view -> model
elm.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.html());
});
});
// model -> view
ctrl.$render = function() {
elm.html(ctrl.$modelValue);
};
// load init value from DOM
ctrl.$setViewValue(elm.html());
}
};
});
<div ng-model="content" title="Click to edit" contentEditable="true" >Some</div>
<pre>model = {{content}}</pre>
20. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
Custom Binding
21. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
22. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
23. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
app.directive('smartFloat', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift( function (viewValue) {
if ( FLOAT_REGEXP.test(viewValue) ) {
// it is valid
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('float', false);
return undefined;
}
});
}
};
});
<div>
Length (float):
<input type="text" ng-model="length" name="length" smart-float />{{length}}<br />
<span ng-show="form.length.$error.float">This is not a valid float number!</span>
</div>
24. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
mi.directive('validatePasswordCharacters', function () {
var REQUIRED_PATTERNS = [/d+/,/[a-z]+/,/[A-Z]+/,/W+/,/^S+$/];
return {
require: 'ngModel',
link: function ($scope, element, attrs, ngModel) {
ngModel.$validators.passwordCharacters = function (value) {
var status = true;
angular.forEach(REQUIRED_PATTERNS, function (pattern) {
status = status && pattern.test(value);
});
return status;
};
}
}
});
25. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
mi.directive('validatePasswordCharacters', function () {
var REQUIRED_PATTERNS = [/d+/,/[a-z]+/,/[A-Z]+/,/W+/,/^S+$/];
return {
require: 'ngModel',
link: function ($scope, element, attrs, ngModel) {
ngModel.$validators.passwordCharacters = function (value) {
var status = true;
angular.forEach(REQUIRED_PATTERNS, function (pattern) {
status = status && pattern.test(value);
});
return status;
};
}
}
});
<form name="myForm">
<div class="label">
<input name="myPassword" type="password" ng-model="data.password"
validate-password-characters required />
<div ng-if="myForm.myPassword.$error.required">
You did not enter a password
</div>
<div ng-if="myForm.myPassword.$error.passwordCharacters">
Your password must contain a numeric, uppercase and lowercase as
well as special characters
</div>
</div>
</form>
26. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
ngModule.directive('usernameAvailableValidator', function($http) {
return {
require: 'ngModel',
link: function($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.usernameAvailable = function(username) {
return $http.get('/api/username-exists?u=' + username);
};
}
}
});
27. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
ngModule.directive('usernameAvailableValidator', function($http) {
return {
require: 'ngModel',
link: function($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.usernameAvailable = function(username) {
return $http.get('/api/username-exists?u=' + username);
};
}
}
});
<form name="myForm">
<!--
first the required, pattern and minlength validators are executed
and then the asynchronous username validator is triggered...
-->
<input type="text"
class="input"
name="username"
minlength="4"
maxlength="15"
ng-model="form.data.username"
pattern="^[-w]+$"
username-available-validator
placeholder="Choose a username for yourself"
required />
<div ng-if="myForm.myUsername.$pending">
Checking Username...
</div>
</form>
28. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
Custom Form Validations
29. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
30. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
<script src="angular.js" />
<script src="angular-messages.js">
angular.module('app', ['ngMessages']);
31. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
<script type="text/javascript" src="angular-messages.js"></script>
<script type="text/javascript">
var ngModule = angular.module('myApp', ['ngMessages']);
</script>
<form name="myForm">
<input type="text" name="colorCode" ng-model="data.colorCode"
minlength="6" required />
<div ng-messages="myForm.colorCode.$error"
ng-if="myForm.$submitted || myForm.colorCode.$touched">
<div ng-message="required">...</div>
<div ng-message="minlength">...</div>
<div ng-message="pattern">...</div>
</div>
<nav class="actions">
<input type="submit" />
</nav>
</form>
32. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
<script type="text/ng-template" id="my-custom-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<form name="myForm">
<input type="email" id="email" name="myEmail" ng-model="email"
minlength="5" required />
<div ng-messages="myForm.myEmail.$error"
ng-messages-include="my-custom-messages">
<div ng-message="required">You did not enter your email</div>
<div ng-message="email">Your email address is invalid</div>
</div>
</form>
33. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
eyalvardi.wordpress.com
Notas do Editor $setValidity(validationErrorKey, isValid)
Change the validity state, and notifies the form when the control changes validity. (i.e. it does not notify form if given validator is already marked as invalid).
This method should be called by validators - i.e. the parser or formatter functions.
Parameters
validationErrorKey – {string} – Name of the validator. the validationErrorKey will assign to $error[validationErrorKey]=isValid so that it is available for data-binding. ThevalidationErrorKey should be in camelCase and will get converted into dash-case for class name. Example: myError will result in ng-valid-my-error and ng-invalid-my-error class and can be bound to as {{someForm.someControl.$error.myError}} .
isValid – {boolean} – Whether the current state is valid (true) or invalid (false).