[DEPRECATED] This repository is no longer maintained

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.

---

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

• https://github.com/wfm-slava

Alexandr Dascal

• https://github.com/adascal

License

Code released under the MIT license.