Angular JS Dynamic Form Creator and Validator

It can help you create dynamic form and attach validation for each field using simple configuration.

Sample configuration will create two required fields title and description.

var formConfig = {
	     header: "Create Validator Form",
	     formAttributes: [
	     {
			       id: "caption",
			       display: "Title (*)",
			       value: "",
			       placeHolder: "Enter title (required field)",
			       type: "textbox",
		         validate: {
				         required: true,
			           requiredMessage: "Please enter proper album title",
		     	   }
		    },
		    {
		      	id: "description",
			      display: "Description (*)",
			      placeHolder: "Enter description",
			      type: "textarea",
			      rows: 8,
			      value: "",
			      validate: {
			        	required: true,
			        	requiredMessage: "Please enter product description",
			      }
		     }]
};

The following elements supported by form builder

i: Textbox
ii: Text Area
iii: Select
iv: Radio Button
v: Check Boxes

You can add unlimited form elements in your form.

Adding category attribute in your form

{
			id: "category",
			display: "Select Category",
			type: "dropdown",
			isMultiple: false,
			text: "Select",
			value: "",
			validate: {
				required: true,
				requiredMessage: "Please select category",
			},
			options: [{
				id: "34",
				value: "Dealer"
			},{
				id: "45",
				value: "Musician"
			},{
				id: "55",
				value: "Artist"
			}], 
}

Validator Attributes

validate: {
				required: true,
				requiredMessage: "Please enter amount", 
				type: 'numeric', 
				numericMessage: "Please enter numbers",
				min: 10, 
				minMessage: "Chars should not be less than 10", 
				max: 100, // max range validation
				maxMessage: "Chars should not be greater than 100", 
				pattern: /^(\([0-9]{3}\)(\s|)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/, 
				patternMessage: "Invalid phone number, should follow (212) 123-1234 format" 
			}

• required: set required attribute true or false
• requiredMessage required message to display if validation failed
• type: set attribute type numeric or string.
• numericMessage numeric message to display if validation failed
• min: min range validation
• minMessage min range display message
• max: max range validation
• maxMessage max range display message
• pattern: regular expression
• patternMessage regular expression validation message

Using jAngular in your existing module

var jangularApp = angular.module('mediasoftApp', ['ngRoute', 'jugnoon-validate'])
   .controller('mainController', ['$scope', 'jangularvalidate', function ($scope, jangularvalidate) {
   }]);

Live Demo