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 ElementsGive 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
|$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 ChangesGive 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
|$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|