Search within TutorialsPark

AngularJS Custom Form Elements

Learn how to use AngularJS directives to create custom Form elements and provide validation effects on them.

AngularJS Directives : Custom Form Elements

AngularJS directive ng-model can be used to get hold of any input data, granting you full independence on how the data is used and presented to the user.

In the demo, a directive called selectorButton is used as an element, it contains three options, they are dependent on the ng-model controller, also the argument control is added to the link function

The currently selected button option is styled using the function selectIt within the link function. The ng-model directive is used to apply bi-directional binding to the property userInput

Example: AngularJS Directives Custom Form Elements

Give it a TRY! » Note: The buttons now are not responsive to change in selection options

AngularJS Custom Form Elements : Responding to External Changes

Extending the last example, we add a feature which responds to change in value of userInput property by highlighting the appropriate button selected.

The function $render defined by the controller ng-model is replaced with function which calls the selectIt function. The NgModel Controller basic methods and properties are defined in the table below.

Table : Basic method and properties provided by NgModel Controller

Name Description
$render NgModel Controller invokes this function inorder to update the UI when the data bound value encounters a change.It can be overridden by custom directives
$setViewValue(value) To update the data-bound values
$viewValue To return the formatted value that should be displayed by the directive
$modelValue It return the unformatted value from the scope.
$formatters An array of formatter functions to modify $modelValue to $viewValue

Example: Angular Complex Directives Responding to External Changes

Give it a TRY! » Note: The feature allows you to change the value of property userInput externally.

AngularJS Custom Form Elements : User Input Validation and Response

The angularJS controller ngModel supports integration of custom directives to form validation process as well.In the example only the options of Android and iOS are valid, while the option Windows shows an error notification

To perform the validation, a function called validator is defined and passes data-bound values which check whether the input is valid or not. The validity is set using the method $setValidity defined by the NgModel Controller. The table below shows some validation methods and properties

Table : Validation method and properties provided by the Ng Model Controller

Name Description
$setPristine() It returns the state of validation to pristine state, hence preventing validation to be performed.
$isEmpty() Used with directive to denote whene the control has no value.
$parsers An array of functions to validate the model value.
$error It returns an object whose properties correspond to validation errors
$pristine If the controls are not modified by the user, it return true
$dirty If the controls get modified by the user, it returns true
$valid If the model value is valid, a value true is returned
$invalid If the model valid is invalid, a true is returned

Example: Angular Custom Directives Scope for each Directive Instance

Give it a TRY! » Note: The example is same as the last example, but the template file is external.