1. www.luxoft.com AngularJS Forms & validation

2. www.luxoft.com AngularJS form example <input type="text" name="firstName" ng-model="myForm.firstName">First name <input type="text" name="lastName" ng-model="myForm.lastName">Last name {{myForm.firstName}} {{myForm.lastName}} angular.module("myapp", []).controller("MyController", function($scope) { $scope.myForm = {}; $scope.myForm.firstName = "Jakob"; $scope.myForm.lastName = "Jenkov"; } );

3. 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">

4. www.luxoft.com Select <select ng-model="myForm.car" ng-options="obj.id as obj.name for obj in myForm.options“> Please choose a car 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" }]; } );

5. www.luxoft.com Form validation <input type="text" id="name" ng-model="myForm.name" ng-minlength="5" ng-maxlength="12"> Name angular.module("myapp", []).controller("MyController", function($scope) { $scope.myForm = {}; $scope.myForm.name = "Jakob Jenkov"; } ); <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

6. www.luxoft.com Form check results

7. www.luxoft.com Using the "name" Attribute <input type="text" ng-model="user.firstLastName" name="firstLastName" placeholder="Enter Name"> 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

8. www.luxoft.com Form and elements validation results

9. www.luxoft.com Form check: change css for invalid field <input type="text" ng-class="myFormNg.name.$valid ? ’fieldValid’ : ‘fieldInvalid’ " name="name" ng-model="myForm.name" ng-minlength="2"> Name

10. 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 You must enter a valid name. Disable button: Submit

11. 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. <input type="text" id="name" ng-model="myForm.name" ng-minlength="5" ng-maxlength="12"> Name Nissan Toyota Fiat

12. 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!"); }); }

13. www.luxoft.com Custom validation

14. www.luxoft.com ngModelController

15. www.luxoft.com Parsers and formatters $scope.account.value = 1000000; $1000000 Account value: function format (value) { return "$“+value; } form.acc.$formatters.push(format) function parse(value) { return value.substr(1); } form.acc.$parsers.push(parse); $formatters $parsers

16. www.luxoft.com ngModelController

17. 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 method ngModel.$valid – result of validation in all validators

18. 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; }); };

19. www.luxoft.com Methods to set validity