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