tg-form
Extension for ngForm with powerful validation mechanism
Quick start
Several quick start options are available:
- Download the latest release
- Clone the repo:
git clone https://github.com/massive-angular/tg-form.git - Install with bower:
bower install tg-form - Install with npm:
npm install tg-form
Examples
Simple form validation
<form tg-form novalidate name="simpleForm">
<div>
<label>
Simple text
<input type="text" name="simpleText" ng-model="simpleText" required minlength="3" />
</label>
</div>
<div>
Simple form is valid: {{ simpleForm.$valid }}
</div>
<div>
<tg-form-message name="simpleText"
required-message="'simple text is required'"
minlength-message="'simple text min length is 3'">
</tg-form-message>
</div>
</form>Custom form validation
$scope.equalTo = function(toField, value) {
return toField === value;
};<form tg-form novalidate name="customForm">
<div>
<label>
Field 1
<input type="text" name="field1" ng-model="field1" required />
</label>
</div>
<div>
<label>
Field 2
<input type="text" name="field2" ng-model="field2" tg-validate-equal-to-field1="equalTo(field1, $value)" />
</label>
</div>
<div>
Custom form is valid: {{ customForm.$valid }}
</div>
<div>
<tg-form-message name="field1"
required-message="'field1 is required'">
</tg-form-message>
<tg-form-message name="field2"
equal-to-field1-message="'field2 must be equal to field1'">
</tg-form-message>
</div>
</form>Custom async form validation
$scope.someAsyncValidation = function(value) {
var deferred = $q.defer();
$timeout(function() {
var result = value === '123';
if(result) {
deferred.resolve();
}
else {
deferred.reject();
}
}, 2 * 1000);
return deferred.promise;
};<form tg-form novalidate name="customAsyncForm">
<div>
<label>
Async field
<input type="text" name="asyncField" ng-model="asyncField" tg-validate-async-some-async-validation="someAsyncValidation($value)" />
</label>
</div>
<div>
Custom async form is valid: {{ (customAsyncForm.$pending) ? 'validating...' : customAsyncForm.$valid }}
</div>
<div>
<tg-form-message name="asyncField"
some-async-validation-message="'Async field must be 123'">
</tg-form-message>
</div>
</form>Custom validator form validation
$scope.isDateValid = function(year, month, day) {
month--;
var date = new Date(year, month, day);
return date.getDate() == day &&
date.getMonth() == month &&
date.getFullYear() == year;
};<form tg-form novalidate name="customValidatorForm">
<tg-form-validator tg-validate-valid-date="isDateValid(year, month, day)"></tg-form-validator>
<input type="number" name="year" ng-model="year" placeholder="year" />
<input type="number" name="month" ng-model="month" placeholder="month" />
<input type="number" name="day" ng-model="day" placeholder="day" />
<div>
Custom validator form is valid: {{ customValidatorForm.$valid }}
</div>
<div>
<tg-form-message
valid-date-message="'Invalid Date'"></tg-form-message>
</div>
</form>Custom async validator form validation
$scope.isDateValid = function(year, month, day) {
month--;
var date = new Date(year, month, day);
return date.getDate() == day &&
date.getMonth() == month &&
date.getFullYear() == year;
};
$scope.isDateValidAsync = function(year, month, day) {
var defer = $q.defer();
$timeout(function() {
if ($scope.isDateValid(year, month, day)) {
defer.resolve();
} else {
defer.reject();
}
}, 2 * 1000);
return defer.promise;
};<form tg-form novalidate name="customValidatorAsyncForm">
<tg-form-validator tg-validate-async-valid-date="isDateValidAsync(asyncYear, asyncMonth, asyncDay)"></tg-form-validator>
<input type="number" name="year" ng-model="asyncYear" placeholder="year" />
<input type="number" name="month" ng-model="asyncMonth" placeholder="month" />
<input type="number" name="day" ng-model="asyncDay" placeholder="day" />
<div>
Custom async validator form is valid: {{ (customValidatorAsyncForm.$pending) ? 'validating...' : customValidatorAsyncForm.$valid }}
</div>
<div>
<tg-form-message
valid-date-message="'Invalid Date'"></tg-form-message>
</div>
</form>Creators
Slava Matvienco
Alexandr Dascal
License
Code released under the MIT license.