Graceful AngularJS Validation Injector
1 person uses it
Author: 1437734?v=3 allenhwkim


Graceful AngularJS validation rule Injector from an object DEMO


How It Works

This module gracefully injects Angular validation rules from a JSON object ONLY if not defined.

For example, there is validation rule given as {minlength:1},

This input | Will become
------------- | -------------
<input name="foo" /> | <input name="foo" ng-minlength="1" ng-model="" />
<input name="foo" ng-minlength="20" /> | <input name="foo" ng-minlength="20" ng-model="" />

Why nui-form-for?

  • It is 100% AngularJS compliant
  • You can have cleaner html as you wish
  • It allows form validation by an object
  • You can user server-side validation


  1. bower install
    $ bower install nui-form-for
  2. add script to your page <script src="nui-form-for.js"></script>
  3. add dependency to your module
    var myapp = angular.module('myapp', ['nui-form-for']);

Usage Example

For entire form DEMO

For a single field DEMO

Requirements For This Module

  1. Must be 100% compliant to AngularJS directives;

    • ngmessages, ngmessage
    • form, input, ng-minlenght, ng-maxlenth, ... etc
  2. Must accept validation rule as a form attriute matching to an object
    i.e., <form ng-form-for="<<MODEL-OBJECT>>" ng-rules="<<ALL-RULES-FOR-FORM>>">

  3. Must accept validation rule as a form field attribute
    i.e., <input .... ng-rule="<<VALIDATIN-RULE-NAME>>">

  4. Must NOT overwrite AngularJS tag validation rules, and HTML5 validation rules.
    For example, assuming there is rule {min:10, max:20}, and html has input tag attribute min="1" then applying rule must be {min:1, and max:20} because min=1 is given from html already.


comments powered by Disqus
This page was last updated over 3 years ago.