Search within TutorialsPark

AngularJS Form Directives Attributes


Learn how to use AngularJS Form Directive Attributes to replace regular Form Elements


AngularJS Forms : Directive Attributes

AngularJS provides a set of directive attributes which can be used in place of regular HTML form elements, such as input , select and form.

These Directive Attributes are available under conditions when the input element has no type attribute or when the type attribute is a url , email , text or number

Table : AngularJS Form Validation Attributes to be used for an Input Element

Variable Description
ng-model To set a bi-directional model data binding.
ng-change To set an expression that is evaluated when the contents of the element undergo a change.
ng-minlength To specify the minimum number of characters required for the element to be valid.
ng-maxlength To specify the maximum length of the charcters required for the elements to be valid.
ng-pattern To set a regular expression. The contents of the element must conform to the pattern
in order to be valid.
ng-required To specify the value of the attribute required.

AngularJS Forms : Using Attributes for Input Elements

The AngularJS directive attributes of ng-required, ng-minlength and ng-patters are used to set validation conditions, they can be used to create forms with multiple types of constraints.

In the demo, we have created a form element which is valid only if value is required, value begins with a lowercase, minimum length is 4 characters, maximum length is 15 characters. Databinding feature is used to show the result in realtime.

Example: AngularJS Forms Validation FeedBack

Give it a TRY! » Note: The Results of the validation are displayed in realtime, due to the data-binding feature.

AngularJS Forms : Forms with Checkboxes

AngularJS provides a set of attributes that can be used as an input element with the value of attribute type set to checkbox.

Table : AngularJS Form Validation Dynamically Managed Validation Classes

Variable Description
ng-model To set a bi-directional model data binding.
ng-change To set an expression that is evaluated when the contents of the element undergo a change.
ng-true-value To specify the value to be set by model binding expression when the element is checked.
ng-false-value To specify the value to be set by model binding expression when the element is unchecked.

The Demo below creates a simple checkbox form using attributes ng-true-value and ng-false-value.

Example: AngularJS Forms Checkbox Attributes

Give it a TRY! » Note:When the state of the box changes, the value within the attributes are applied.


AngularJS Forms Directive Attributes: Using Textarea

The AngularJS provides directive attributes for the element textarea as well, the attributes are same as that for the input element.

Example: AngularJS Forms Directive Attributes Using Textarea

Give it a TRY! » Note: The validation results are shown in realtime due to the data-binding feature.


AngularJS Form Directive Attributes : Select Elements

AngularJS provides a set of directive to be which can be used with select element, the attribute ng-options is used to get option elements from arrays and objects.

In the demo, a data-model is defined contains bills to paid and the paid status of those bills, also an id attribute is used for each bill.The attribute ng-options functions similar to directive ng-repeat

Example: AngularJS Forms Directive Attributes Select Elements

Give it a TRY! » Note: AngularJS generates element option for each object in the array.


AngularJS Form Directive Attributes : Setting the Default First Option in a Select

The select option by default has no value, but you can set a default option by adding your own empty value attribute.

Example: AngularJS From Directive AttributesSetting the Default Option

Give it a TRY! » Note: Selecting the empty value results in a selection of none


AngularJS Form Directive Attributes : Controlling the Selection Value

When a selection is made from the options, the ng-model expression is updated with the complete source, but we can control the option to be selection by using a suitable expression.

In the demo, we have used the expression in the form of selected property as label for variable in array to select only the name of the bill.

Example: AngularJS From Directive AttributesSetting the Default Option

Give it a TRY! » Note:Notice that only the name of the bill is selected and not the entire object.


AngularJS Form Directive Attributes : Creating an OptGroup

The value of the select elements can be grouped based on the value of the property using the attribute ng-options, to generate a set of optgroup elements based on value of property.

In the demo, we have used the property dueMonth to group the options together, the value within the attribute ng-option is of form selected property group by grouping for variable in array

Example: AngularJS From Directive AttributesSetting the Default Option

Give it a TRY! » Note: The grouping is done on the basis of property dueMonth