Skip to main content

jAngular Dynamic Form

jAngular Dynamic Form script allow you to build any type of forms according to your requirements along with complex data validations and attachment of uploader for uploading one to many files, videos, photos and audio files.

This doc will cover various options / attributes available in jAngular script.

Example Usage

formAttributes: [
{
    id: "title",
    display: "Title",
    value: "",
    placeHolder: "Enter title",
    type: "textbox",
    validate: {
        required: true,
        type: 'string',
        requiredMessage: "Please enter title",
        min: 3,
        minMessage: "Product should not be less than 3",
        max: 100,
        maxMessage: "Product hould not be greater than 100"
    }
},
{
    id: "description",
    display: "Description (*)",
    placeHolder: "Enter product description",
    type: "textarea",
    rows: 8,
    value: $scope.Info.description,
    validate: {
        required: true,
        type: 'string',
        requiredMessage: "Please enter description",
        max: 5000,
        maxMessage: "Description should not be greater than 5000"
    }
}]

The above formAttributes will generate form with two input fields, title and description along with all required validations.

List of jAngular Script Attributes

jAngular script include various built-in controls, validation options and optional uploader templates. You can customize it by adding more features easily

Type Description
textbox This will render text box input field within form.
Example
{
    id: "email",
    display: "Personal Email (*)",
    placeHolder: "Enter personal email",
    type: "textbox",
    value: "",
    validate: {
        required: true,
        type: 'string',
        requiredMessage: "Please enter email address",
        pattern: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/,
    	patternMessage: "Invalid email address"
    }
}
password This will render password input field within form.
Example
{
    id: "password",
    display: "Password (*)",
    placeHolder: "Enter password",
    type: "password",
    rows: 8,
    value: "",
    validate: {
        required: true,
        type: 'string',
        requiredMessage: "Please enter password",
        max: 16,
        maxMessage: "Password should not be greater than 16",
        max: 3,
        maxMessage: "Password should not be less than 3"
    }
}
textarea This will render textarea input field within form.
Example
{
    id: "description",
    display: "Description (*)",
    placeHolder: "Enter product description",
    type: "textarea",
    rows: 8,
    value: "",
    validate: {
        required: true,
        type: 'string',
        requiredMessage: "Please enter description",
        max: 5000,
        maxMessage: "Description should not be greater than 5000"
    }
}
textangular This will render textangular rich text editor within form, you can replace textangular with any editor your want to prefer.
Example
{
    id: "description",
    display: "Description (*)",
    placeHolder: "Enter product description",
    type: "textangular",
    rows: 8,
    value: "",
    validate: {
        required: true,
        type: 'string',
        requiredMessage: "Please enter description",
        max: 5000,
        maxMessage: "Description should not be greater than 5000"
    }
}
dropdown This will render single or multiple dropdown list within form. You can set isMultiple true for making multiple selection enabled. By default choosen plugin attached with dropdown. You can remove it if not required.
Example
{
    id: "categories",
    display: "Select Categories",
    type: "dropdown",
    isMultiple: true,
    text: "Select",
    values: $scope.Info.categories,
    validate: {
        required: true,
        requiredMessage: "Please select atleast one category",
    },
    options: [ // recommended to load categories from database at start of app, save it in array and load it from array here.
        {
            "id": "54",
            "title": "Sports"
        },
        {
            "id": "55",
            "title": "Entertainment"
        },
        {
            "id": "56",
            "title": "Autos"
        },
        {
            "id": "57",
            "title": "Comedy"
        },
        {
            "id": "58",
            "title": "Arts"
        }
    ]
} 
radio This will render list of radio buttons vertically displayed within form.
 {
    id: "contributionby",
    display: "Contribution to EHS by",
    placeHolder: "",
    type: "radio",
    value: "",
    options: [{
		   	    id: "0",
		    	value: "Self"
			},{
				id: "1",
				value: "Spuose"
			},{
				id: "2",
				value: "Exemption"
			}
	],
    validate: {
        required: true,
        requiredMessage: "Please select contribution to ehs by"
    }
}
check This will render list of check boxes vertically displayed within form.
Example
 {
    id: "contributionby",
    display: "Contribution to EHS by",
    placeHolder: "",
    type: "check",
    values: [], // array of selection
    options: [{
		   	    id: "0",
		    	value: "Self"
			},{
				id: "1",
				value: "Spuose"
			},{
				id: "2",
				value: "Exemption"
			}
	],
    validate: {
        required: true,
        requiredMessage: "Please select contribution to ehs by"
    }
}
radioinline This will render list of radio buttons horizontally displayed within form.
Example
 {
    id: "contributionby",
    display: "Contribution to EHS by",
    placeHolder: "",
    type: "radioinline",
    value: "",
    options: [{
		   	    id: "0",
		    	value: "Self"
			},{
				id: "1",
				value: "Spuose"
			},{
				id: "2",
				value: "Exemption"
			}
	],
    validate: {
        required: true,
        requiredMessage: "Please select contribution to ehs by"
    }
}
checkinline This will render list of check boxes horizontally displayed within form.
Example
 {
    id: "contributionby",
    display: "Contribution to EHS by",
    placeHolder: "",
    type: "checkinline",
    values: [], // array of selection
    options: [{
		   	    id: "0",
		    	value: "Self"
			},{
				id: "1",
				value: "Spuose"
			},{
				id: "2",
				value: "Exemption"
			}
	],
    validate: {
        required: true,
        requiredMessage: "Please select contribution to ehs by"
    }
}
singlecheck This will render single checkbox within form.
Example
 {
    id: "term",
    display: "Accept terms of use & privacy policy",
    value: 0,
    type: "singlecheck",
    validate: {
        required: true,
        requiredMessage: "Please accept our terms of service & privacy policy"
    }
}
uploadfiles This can be used to attach file uploader with form.
Example
{
    id: "files",
    //display: "Select Files",
    placeHolder: "",
    template: "/path/upload.html", // attach uploader directive
    settings: {
        handlerpath: apiPath + "upload.php",
        pickfilecaption: "Select Images",
        uploadfilecaption: "Start Uploading",
        max_file_size: "50mb",
        chunksize: '4mb',
        plupload_root: '../../plugins/plupload',
        headers: { },
        extensiontitle: "Images Files",
        extensions: "jpg,jpeg,png",
        filepath: imagedirectoryPath,
        removehandler: apiPath + "removefiles.php", 
    },
    type: "uploadfiles",
    value: $scope.Info.files,
    maxfiles: 10
}
datepicker This will render datepicker with form.
Example
{
    id: "expireon",
    display: "Expire On (*)",
    placeHolder: "",
    type: "datepicker",
    value: "",
   
    validate: {
        required: true,
        type: 'string',
        requiredMessage: "Please enter date of expiry"
    }
}

We love to hear your suggestions and feedbacks. It help us build this toolkit more useful. Send your suggestions to our support mail support@mediasoftpro.com.