tg-form

    1.0.1 • Public • Published

    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.

    Install

    npm i tg-form

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar