Unit 5
Directives and Validation
Akshata S Bhayyar
Assistant Professor,
Dept. of CSE, RIT
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Content
• Directives: Simple directives, Using templates, Working with
controllers, Directive scope and isolate scope, Build: Tweet Directive:
Add a timer that updates tweet time continuously,
• Forms and Validation: Working with forms in AngularJS, Form
validation and error handling, Using AngularJS directives for form
validation
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Simple directives
• AngularJS lets you extend HTML with new attributes called Directives.
• AngularJS has a set of built-in directives which offers functionality to your
applications.
• AngularJS also lets you define your own directives
• AngularJS directives are extended HTML attributes with the prefix ng-.
1. The ng-app directive initializes an AngularJS application.
2. The ng-init directive initializes application data.
3. The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Common Built-in Directives
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Create New Directives
• In addition to all the built-in AngularJS directives, you can create your own
directives.
• New directives are created by using the .directive function.
• To invoke the new directive, make an HTML element with the same tag
name as the new directive.
• When naming a directive, you must use a camel case nam
Example : w3TestDirective, but when invoking it, you must use - separated
name, w3-test-directive:
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Create New Directives
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
You can invoke a directive by using:
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Element name directive
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Attribute directive
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Class directive
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Comment directive
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Restrictions
You can restrict your directives to only be invoked by some of the methods.
The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment
By default the value is EA, meaning that both Element names and attribute names can invoke the directive.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
By adding a restrict property with the value "A", the directive can only be invoked by attributes:.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Form Validation
• AngularJS performs form validation on the client side.
• AngularJS monitors the state of the form and input fields (input, text-
area, select), and notifies the user about the current state.
• AngularJS also holds information about whether the input fields have
been touched, modified, or not.
• Form input fields have the following states:
1. $untouched: It shows that field has not been touched yet.
2. $touched: It shows that field has been touched.
3. $pristine: It represents that the field has not been modified yet.
4. $dirty: It illustrates that the field has been modified.
5. $invalid: It specifies that the field content is not valid.
6. $valid: It specifies that the field content is valid.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Form Validation
• These all are the properties of the input field which can be either true or
false.
• These all are the properties of the form which can be either true or false.
• These states can be used to show meaningful messages to the use
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Form Validation
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
CSS Classes
• AngularJS adds CSS classes to forms and input fields depending on
their states.
• The following classes are added to, or removed from, input fields:
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
CSS Classes
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Custom Validation
• To create your own validation function is a bit more tricky; You have
to add a new directive to your application, and deal with the
validation inside a function with certain specified arguments.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Example Explained:
• In HTML, the new directive will be referred to by using the attribute "my-
directive".
• In the JavaScript we start by adding a new directive named myDirective.
• Remember, when naming a directive, you must use a camel case name,
myDirective, but when invoking it, you must use - separated name, my-
directive.
• Then, return an object where you specify that we require ngModel, which is
the ngModelController.
• Make a linking function which takes some arguments, where the fourth
argument, mCtrl, is the ngModelController,
• Then specify a function, in this case named myValidation, which takes one
argument, this argument is the value of the input element.
• Test if the value contains the letter "e", and set the validity of the model
controller to either true or false.
• At last, mCtrl.$parsers.push(myValidation); will add the myValidation function
to an array of other functions, which will be executed every time the input
value changes Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
