useFormError is a directive, which is designed to create custom checks.
- The directive itself set key/value pair with the
ngModel
$error object (which stores a key/value state of validation errors). useformError
depending on the value of the expressionuseErrorExpression
establishes the validity of input form, and accordingly, the entire form.
#Table of contents
Installation with bower
.
bower install use-form-error
Or simply download the file use-form-error
You must connect the module use
under the project dependencies.
angular.module('ExampleApp', ['use']);
It can be used in three versions:
- Used on tags with
ngModel
, likeinput
,select
,textarea
. - Used on tags without
ngModel
with the name of input form, likediv
,span
,form
. - Used on tags without
ngModel
, likediv
,span
,form
. In this case, the validity of the forms to be used.
<input ng-model="expression" use-form-error="keyValue" use-error-expression="expression" />
<input ng-model="expression" name="nameInput">
<any use-form-error="keyValue" use-error-expression="expression" use-error-input="nameInput" />
In this case, the validity of the forms to be used.
<input ng-model="expression">
<any use-form-error="keyValue" use-error-expression="expression" />
Parameters description directive.
@param
{string} useFormError this is the key is to be set in the object $error form or input form.@param
{expression} useErrorExpression an angular expression evaluating to set validity to form or input form.@param
{?object} useErrorInput an optional parameter that contains a form or the input form. If this parameter is not set, the validity will be set in the form.
Examples of using.
Example on jsfiddle
<form name="myForm">
<label>Enter your odd digit:</label>
<input type="text"
ng-model="digit"
name="myDigit"
ng-minlength="1"
ng-maxlength="20"
required
use-form-error="isEven"
use-error-expression="digit%2==0"
/>
<pre>myForm.myDigit.$error = {{ myForm.myDigit.$error | json }}</pre>
<div ng-messages="myForm.myDigit.$error" style="color:maroon">
<div ng-message="required">You did not enter a digit</div>
<div ng-message="minlength">Your digit is too short</div>
<div ng-message="maxlength">Your digit is too long</div>
<div ng-message="isEven">Your digit is even</div>
</div>
</form>
Example on jsfiddle
<form name="myForm">
<label>Your number is not to be divided by three:</label>
<input type="text"
ng-model="digit"
name="myDigit"
ng-minlength="1"
ng-maxlength="20"
required
/>
<span use-form-error="isDividedThree" use-error-expression="digit%3==0" use-error-input="myForm.myDigit"></span>
<pre>myForm.myDigit.$error = {{ myForm.myDigit.$error | json }}</pre>
<div ng-messages="myForm.myDigit.$error" style="color:maroon">
<div ng-message="required">You did not enter a digit</div>
<div ng-message="minlength">Your digit is too short</div>
<div ng-message="maxlength">Your digit is too long</div>
<div ng-message="isDividedThree">Your digit is divided by three</div>
</div>
</form>
Example on jsfiddle
<form name="myForm">
<label>Your number should be even and not divisible by three.</label>
<input type="text"
ng-model="digit"
name="myDigit"
ng-minlength="1"
ng-maxlength="20"
required
use-form-error="isEven"
use-error-expression="digit%2==0"
/>
<span use-form-error="isDividedThree" use-error-expression="digit%3==0" use-error-input="myForm.myDigit"></span>
<pre>myForm.myDigit.$error = {{ myForm.myDigit.$error | json }}</pre>
<div ng-messages="myForm.myDigit.$error" style="color:maroon">
<div ng-message="required">You did not enter a digit</div>
<div ng-message="minlength">Your digit is too short</div>
<div ng-message="maxlength">Your digit is too long</div>
<div ng-message="isEven">Your digit is even</div>
<div ng-message="isDividedThree">Your digit is divided by three</div>
</div>
</form>
Example on jsfiddle
<form name="myForm" use-form-error="formInvalid" use-error-expression="digit==9">
<div ng-messages="myForm.$error" style="color:maroon">
<div ng-message="formInvalid">You form is not valid</div>
</div>
<label>Your number should be even, not divisible by three and should not be 6,7,9:</label>
<input type="text"
ng-model="digit"
name="myDigit"
ng-minlength="1"
ng-maxlength="20"
required
use-form-error="isEven"
use-error-expression="digit%2==0"
/>
<span use-form-error="isDividedThree" use-error-expression="digit%3==0" use-error-input="myForm.myDigit"></span>
<span use-form-error="formInvalid" use-error-expression="digit==7" use-error-input="myForm.myDigit"></span>
<span use-form-error="formInvalid" use-error-expression="digit==6"></span>
<pre>myForm.myDigit.$error = {{ myForm.myDigit.$error | json }}</pre>
<div ng-messages="myForm.myDigit.$error" ng-messages-multiple="true" style="color:maroon">
<div ng-message="required">You did not enter a digit</div>
<div ng-message="minlength">Your digit is too short</div>
<div ng-message="maxlength">Your digit is too long</div>
<div ng-message="isEven">Your digit is even</div>
<div ng-message="isDividedThree">Your digit is divided by three</div>
</div>
</form>