Validation with - PowerPoint Presentation

Slide1

Validation with AngularJS

Krishna Mohan Koyya

Glarimy

Technology Services

http://www.glarimy.comSlide2

Validation with AngularJS

Instrumentation

Form Control

Built-in Validations

Pattern-based Validation

Built-in CSS Classes

Built-in API

Custom ValidationSlide3

AngularJS Validation Framework

Client-side validation, naturally!

You still need to take care of server-side validation

Applies on <input/> tag

But not for type=file

In the lines of HTML-5 validation

Better the browser-validation is turned-off

Angular provides

databinding

as well as validation

Lifecycle phases

Pristine: Value of INPUT is not TOUCHED, yet!

Dirty: Value of INPUT is TOUCHED

Valid/Invalid: Value of INPUT is VALID/INVALIDSlide4

Instrumentation

Have the form

with a name

<form name=‘

myForm

’>…</form>

Disable the built-in browser validation

<form name=‘

myForm

’

novalidate

>…</form>

Optionally have a submit callback

<form name=‘

myForm

’

novalidate

ng

-submit=‘proceed()’>…</form>

Provide validation hints on FORM INPUT elements

<input type=‘text’ name=‘

uname

’

ng

-required=‘true’>

Provide placeholders for error reporting

<p

ng

-show=‘

myForm.uname.$error.required

’>Wrong name</p>Slide5

Form Control

Have the form

with a name

<form name=‘

myForm

’>…</form>

Disable the built-in browser validation

<form name=‘

myForm

’

novalidate

>…</form>

Optionally have a submit callback

<form name=‘

myForm

’

novalidate

ng

-submit=‘proceed()’>…</form>

Provide validation hints on FORM INPUT elements

<input type=‘text’ name=‘

uname

’

ng

-required=‘true’>

Provide placeholders for error reporting

<p

ng

-show=‘

myForm.uname.$error.required

’>Wrong name</p>

Enable SUBMIT button only if form is VALID

<input type=‘submit’

ng

-disabled=‘!

myForm.$valid

’>Slide6

Validation: An illustration

<form

name=‘

myForm

’

novalidate

ng

-submit=‘proceed()’

>

<input name=‘

uname

’

ng

-required=‘true’

>

<p

ng

-show=‘

myForm.uname.$error.required

’

>

Wrong name

</p>

<input type=‘submit’

ng

-disabled=‘!

myForm.$valid

’

>

</form>Slide7

Built-in Validations

All the built-in validations are

on INPUT element

as attributed directives

n

g

-required

Same as HTML5 required attribute

n

g-minlength

Validates the minimum length of the value

n

g-maxlength

Validates the maximum length of the value

n

g

-pattern

Validates if the value is confirming to the provided regular expressionSlide8

Patterns based validation

Directive

ng

-pattern enables validation based on regular expressions

It can take regular expression directly

The supplied regular expression is used directly

It can also take a normal string

The supplied string is wrapped with ^ and $ and then applied

Example: ‘krishna’ becomes /^krishna$/

Avoid using the global hint flag - gSlide9

Built-in CSS Classes

CSS Classes for validation

ng

-pristine

n

g

-dirty

n

g

-valid

ng-invlid

The classes are already applied on the INPUT elements

They are to be defined as per your requirements

These classes are like any other classes

Can be used like .

ng

-

dirty.ng

-valid and etc., Slide10

Built-in API

Several API is provided to access validation framework

These objects are attached to the INPUT elements with validation enabled

$valid:

boolean

: Tells if the INPUT is valid

$invalid:

boolean

: Tells if the INPUT is invalid

$pristine:

boolean

: Tells if the INPUT is yet to be touched

$dirty:

boolean

: Tells if the INPUT is touched

$error: object: Describes the validation errors on a given INPUTSlide11

Custom Validation

Validation attributes can be set from Controllers

$scope can access named form and it’s named INPUT elements

$

setValidity

can set the status of an INPUT

Normally done to validate consistency of several INPUT elements

Only controller can access more than one INPUT element value

Typically done after FORM submission

Special directives also can be developedSlide12

Complete Illustration – 1

<!

doctype

html>

<

html

ng

-app="app">

<

head>

<

title>Validation |

AngularJS

|

Glarimy</title>

<

style>

form .

ng

-pristine

{border

: 1px yellow solid

;}

form

.

ng

-

dirty.ng

-valid

{border

: 1px green solid

;}

form

.

ng

-

dirty.ng

-invalid {

border

: 1px red

solid;

color

: red;

}

form

.

ng

-invalid

{

color

: red

; text-decoration: underline;

}

</

style

>

<

script

src

="angular.js"></script>

<

script

src

="glarimy.js"></script>

</

head>

.... Slide13

Complete Illustration – 2

….

<

body

ng

-controller="ctrl">

<

h1>

AngularJS

Validation</h1>

<

hr />

<

h3>Register Yourself</h3>

<

form name='form'

novalidate

ng

-submit='register()'>

User

Name

: <

input name='

uname

'

ng

-model='user.name'

ng

-required=

'true’

ng-minlength

='4'

ng-maxlength

='8'

/>

<

p

ng

-show='

form.uname.$error.required

'>User name

can not

be empty</p>

<

p

ng

-show='

form.uname.$error.minlength

'>Minimum length of

user name

must be 4</p>

<

p

ng

-show='

form.uname.$error.maxlength

'>

Maximumlength

of user name must be 4</p

>

Age: <input

name='age'

ng

-model=

'

user.age

‘

ng

-pattern

='/^[0-9]+$/'

ng

-required='true'

/>

<

p

ng

-show='

form.age.$error.required

'>Age is a must!</p>

<

p

ng

-show='

form.age.$error.pattern

'>Enter only digits please!</p>

<

p

ng

-show='

form.age.$error.maxage

'>Age can not be more

than 100

years</p></td>

<

input type='submit'

ng

-disabled='!

form.$

valid

’ value

='Register

'>

</form>

…. Slide14

Complete Illustration – 3

….

<

hr>

<

tt

>user = {{user}}</

tt

><

br

/>

<

tt

>

form.uname.$valid

= {{

form.uname.$valid

}}</

tt

><

br

/>

<

tt

>

form.uname.$invalid

= {{

form.uname.$invalid

}}</

tt

><

br

/>

<

tt

>

form.uname.$pristine

= {{

form.uname.$pristine

}}</

tt

><

br

/>

<

tt

>

form.uname.$dirty

= {{

form.uname.$dirty

}}</

tt

><

br

/>

<

tt

>

form.uname.$error

= {{

form.uname.$error

}}</

tt

><

br

/>

<

tt

>

form.age.$valid

= {{

form.age.$valid

}}</

tt

><

br

/>

<tt>form.age.$error = {{form.age.$error}}</tt

>

<

br

/>

<

tt

>

form.$valid

= {{

form.$valid

}}</

tt

><

br

/>

<

tt

>

form.$error.required

= {{!!

form.$error.required

}}</

tt

><

br

/>

<

tt

>

form.$error.minlength

= {{!!

form.$error.minlength

}}</

tt

><

br

/>

<

tt

>

form.$error.maxlength

= {{!!

form.$error.maxlength

}}</

tt

><

br

/>

<

tt

>

form.$error.pattern

= {{!!

form.$error.pattern

}}</

tt

><

br

/>

</body>

</html>Slide15

Complete Illustration – 4

var

app =

angular.module

("app", []);

app.controller

("ctrl", function($scope) {

$

scope.user

= {

name

: "",

age

: ""

};

$

scope.register

= function() {

console.log

('

Recieved

validated data!');

console.log

($

scope.user

);

if

($

scope.user.age

> 100) {

console.log

('

maxage

is an error');

$

scope.form.age.$setValidity

('

maxage

', false);

}

};

});