AngularJS Krishna Mohan Koyya Glarimy Technology Services httpwwwglarimycom Validation with AngularJS Instrumentation Form Control Builtin Validations Patternbased Validation Builtin CSS Classes ID: 582103
Download Presentation The PPT/PDF document "Validation with" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
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);
}
};
});