While this project is fully functional, the dependencies are no longer up to date. You are still welcome to explore, learn, and use the code provided here.
Modus is dedicated to supporting the community with innovative ideas, best-practice patterns, and inspiring open source solutions. Check out the latest Modus Labs projects.
Extension for ngForm with powerful validation mechanism
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
<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>$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>$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>$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>$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>Slava Matvienco
Alexandr Dascal
Code released under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent