a
directive in module ng
Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty.This change permits the easy creation of action links with the
ngClick directive
without changing the location or causing page reloads,e.g.:
<a href="" ng-click="list.addItem()">Add Item</a>form
- - directive in module ng
Directive that instantiates
FormController.
If the
Alias:
In Angular, forms can be nested. This means that the outer form is valid when all of the child
forms are valid as well. However, browsers do not allow nesting of
For this reason, Angular prevents the default action (form submission to the server) unless the
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
The following example shows a simple way to utilize CSS transitions to style a form element that has been rendered as invalid after it has been validated:
If the
name attribute is specified, the form controller is published onto the current scope under
this name.
Alias: ngForm
In Angular, forms can be nested. This means that the outer form is valid when all of the child
forms are valid as well. However, browsers do not allow nesting of <form> elements, so
Angular provides the ngForm directive which behaves identically to
<form> but can be nested. This allows you to have nested forms, which is very useful when
using Angular validation directives in forms that are dynamically generated using the
ngRepeat directive. Since you cannot dynamically generate the name
attribute of input elements using interpolation, you have to wrap each set of repeated inputs in an
ngForm directive and nest these in an outer form element.CSS classes
ng-validis set if the form is valid.ng-invalidis set if the form is invalid.ng-pristineis set if the form is pristine.ng-dirtyis set if the form is dirty.ng-submittedis set if the form was submitted.
Submitting a form and preventing the default action
Since the role of forms in client-side Angular applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload that sends the data to the server. Instead some javascript logic should be triggered to handle the form submission in an application-specific way.For this reason, Angular prevents the default action (form submission to the server) unless the
<form> element has an action attribute specified.You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
- ngSubmit directive on the form element
- ngClick directive on the first button or input field of type submit (input[type=submit])
- If a form has only one input field then hitting enter in this field triggers form submit
(
ngSubmit) - if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
- if a form has one or more input fields and one or more buttons or input[type=submit] then
hitting enter in any of the input fields will trigger the click handler on the first button or
input[type=submit] (
ngClick) and a submit handler on the enclosing form (ngSubmit)
ngModelOptions changes will take place immediately when an enclosing form is
submitted. Note that ngClick events will occur before the model is updated. Use ngSubmit
to have access to the updated model.Animation Hooks
Animations in ngForm are triggered when any of the associated CSS classes are added and removed. These classes are:.ng-pristine, .ng-dirty, .ng-invalid and .ng-valid as well as any
other validations that are performed within the form. Animations in ngForm are similar to how
they work in ngClass and animations can be hooked into using CSS transitions, keyframes as well
as JS animations.The following example shows a simple way to utilize CSS transitions to style a form element that has been rendered as invalid after it has been validated:
//be sure to include ngAnimate as a module to hook into more
//advanced animations
.my-form {
transition:0.5s linear all;
background: white;
}
.my-form.ng-invalid {
background: red;
color:white;
}
Directive Info
- This directive executes at priority level 0.
Usage
- as element:
<form [name=""]> ... </form>input
- - directive in module ng
ngModel, it provides data-binding, input state control, and validation. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.
Usage
- as element:
<input ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""] [ng-pattern=""] [ng-change=""] [ng-trim=""]> ... </input>input[checkbox]
- - input in module ng
HTML checkbox.
Directive Info
- This directive executes at priority level 0.
Usage
<input type="checkbox" ng-model="" [name=""] [ng-true-value=""] [ng-false-value=""] [ng-change=""]>input[date]
- - input in module ng
Input with date validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example:2009-01-06. Since many modern browsers do not yet support this input type, it is important to provide cues to users on the expected input format via a placeholder or label.
The model must always be a Date object, otherwise Angular will throw an error. InvalidDateobjects (dates whosegetTime()isNaN) will be rendered as an empty string.
The timezone to be used to read/write theDateinstance in the model can be defined using ngModelOptions. By default, this is the timezone of the browser.
Usage
<input type="date" ng-model="" [name=""] [min=""] [max=""] [required=""] [ng-required=""] [ng-change=""]>
