Dynamic form from JSON data (different types)
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" },
]
}
];})