View
248
Download
0
Category
Preview:
Citation preview
www.luxoft.com
AngularJS
Forms
& validation
www.luxoft.com
AngularJS form example
<div ng-controller="MyController" > <form> <input type="text" name="firstName"
ng-model="myForm.firstName">First name <br/> <input type="text" name="lastName"
ng-model="myForm.lastName">Last name <br/> </form> <div>{{myForm.firstName}} {{myForm.lastName}}</div></div>
<script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myForm = {}; $scope.myForm.firstName = "Jakob"; $scope.myForm.lastName = "Jenkov"; } );</script>
www.luxoft.com
Checkboxes and radiobuttons
<input type="checkbox" ng-model="myForm.wantNewsletter”ng-true-value="yes" ng-false-value="no" >
<input type="radio" ng-model="myForm.whichNewsletter" value="weeklyNews">
<input type="radio" ng-model="myForm.whichNewsletter" value="monthlyNews">
www.luxoft.com
Select
<select ng-model="myForm.car" ng-options="obj.id as obj.name for obj in myForm.options“> <option value="">Please choose a car</option></select>
<script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myForm = {}; $scope.myForm.car = "nissan"; $scope.myForm.options = [
{ id : "nissan", name: "Nissan" }, { id : "toyota", name: "Toyota" }, { id : "fiat" , name: "Fiat" }]; } );</script>
www.luxoft.com
Form validation<form>
<input type="text" id="name" ng-model="myForm.name" ng-minlength="5" ng-maxlength="12"> Name <br/>
</form>
<script> angular.module("myapp", []) .controller("MyController", function($scope) { $scope.myForm = {}; $scope.myForm.name = "Jakob Jenkov"; } );</script>
<input type="text" id="name" ng-model="myForm.name” ng-pattern="/^\d+$/”>
ng-required directive checks if the value of the form field is empty or not
www.luxoft.com
Form check results
www.luxoft.com
Using the "name" Attribute
<form name="myForm" novalidate="novalidate"> <input type="text"
ng-model="user.firstLastName" name="firstLastName" placeholder="Enter Name">
</form>
• Adding the "name" attribute to the form adds the FormController to the scope by that name
• Adding the "name" attribute to a control with the ngModel directive adds that ngModelController for that control to the FormController
• This is useful if one wants to check the state of the form or control programmatically
www.luxoft.com
Form and elements validation results
www.luxoft.com
Form check: change css for invalid field
<form name="myFormNg" ><input type="text" ng-class="myFormNg.name.$valid ? ’fieldValid’ : ‘fieldInvalid’ " name="name" ng-model="myForm.name" ng-minlength="2"> Name <br/>
</form>
www.luxoft.com
Form check: show message
<form name="myFormNg" ng-submit="myForm.submitTheForm()" novalidate>
<input type="text" ng-
class="myForm.getFormFieldCssClass(myFormNg.name2)" id="name1" name="name2" ng-model="myForm.name3" ng-minlength="2"> Name <br/>
<div ng-show="myFormNg.name2.$invalid"> You must enter a valid name. </div>
</form>
Disable button:<button ng-disabled="myFormNg.$invalid">Submit</button>
www.luxoft.com
Submitting the form
You can submit a form in two ways:• Using a button element with an ng-click attribute.• Using an ng-submit attribute (directive) on the form element.
<form ng-submit="myForm.submitTheForm()"><input type="text" id="name"
ng-model="myForm.name" ng-minlength="5" ng-maxlength="12"> Name <br/>
<select ng-model="myForm.car"> <option value="nissan">Nissan</option> <option value="toyota">Toyota</option> <option value="fiat">Fiat</option></select>
<input type="submit" value="Submit Form"></form>
www.luxoft.com
Submitting the form
$scope.myForm.submitTheForm = function(item, event) { console.log("--> Submitting form"); var dataObject = { name : $scope.myForm.name, car : $scope.myForm.car };
var p = $http.post(”process.jsp", dataObject, {}); p.success(function(dataFromServer) { console.log(dataFromServer.title); }); p.error(function(data) { alert("Submitting form failed!"); });}
www.luxoft.com
Custom validation
www.luxoft.com
ngModelController
www.luxoft.com
Parsers and formatters
$scope.account.value = 1000000;
$1000000Account value:
function format (value) { return "$“+value;}
form.acc.$formatters.push(format)
<form name="form“> <input name="acc“ ng-model="account.value"></form>
function parse(value) { return value.substr(1);}
form.acc.$parsers.push(parse);$
form
att
ers
$pars
ers
www.luxoft.com
ngModelController
www.luxoft.com
Custom validator
ngModel.$validators.onlyNumbers =
function(modelValue, viewValue) { var value = modelValue || viewValue;
return /[0-9]+/.test(value);};
ngModel.$error.onlyNumbers – results of validation in this methodngModel.$valid – result of validation in all validators
www.luxoft.com
Custom async validator
ngModel.$asyncValidators.uniqueUsername =
function(modelValue, viewValue) {
var value = modelValue || viewValue;
return $http.get('/api/users/' + value). // Lookup user
then(function resolved() {
//username exists, this means validation fails
return $q.reject('exists');
}, function rejected() {
//username does not exist - this validation passes
return true;
});
};
www.luxoft.com
Methods to set validity
Recommended