Dynamic form from JSON data (different types)
11:43 16 Jun 2014

I try to create a dynamic form in AngularJS using the data from a JSON. I have this working:

HTML

    

Required! Not email!

JavaScript

angular.module('angularTestingApp').controller('DynamicFormCtrl', function ($scope) {

$scope.formFields = [
    {
        name: 'firstName',
        type: 'text'
    },
    {
        name: 'email',
        type: 'email'
    },
    {
        name: 'password',
        type: 'password'
    },
    {
        name: 'secondName',
        type: 'text'
    }
];}).directive("dynamicName",function($compile){
return {
    restrict:"A",
    terminal:true,
    priority:1000,
    link:function(scope,element,attrs){
        element.attr('name', scope.$eval(attrs.dynamicName));
        element.removeAttr("dynamic-name");
        $compile(element)(scope);
    }
}});

This code works, but the question is that I don't know how to add dynamic checkbox or checklist and how can I validate inside the form, something like this:

angular.module('angularTestingApp')
.controller('DynamicFormCtrl', function ($scope) {

$scope.formFields = [
    {
        name: 'firstName',
        type: 'text'
    },
    {
        name: 'email',
        type: 'email'
    },
    {
        name: 'password',
        type: 'password'
    },
    {
        name: 'city',
        type: 'checkbox',
        choices: [
            { name: "red" },
            { name: "blue" },
            { name: "green" },
        ]
    }
];})
javascript json forms angularjs dynamic-data