AngularJS dynamic form from json data (different types)

Question

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

HTML

    <p ng-repeat="field in formFields">             <input                  dynamic-name="field.name"                 type="{{ field.type }}"                 placeholder="{{ field.name }}"                 ng-model="field.value"                 required             >             <span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>             <span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.email">Not email!</span>     </p>     <button ng-disabled="myForm.$invalid">Submit</button>                  </form> 

JS

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 dont 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" },         ]     } ];}) 

Thank you in advance for your attention. Best Regards!

Answer 1

I have solved my problem.

This a plunkr link with one example of Dynamic Forms with Validation in AngularJS

http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=preview

.html

 <form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">  <div ng-repeat="field in entity.fields">       <ng-form name="form">     <!-- TEXT FIELDS -->     <div ng-if="field.type=='text'" class="form-group">       <label class="col-sm-2 control-label">{{field.label}}</label>       <div class="col-sm-6">         <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data"  class="form-control" required/>          <!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->          <span  data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>       </div>     </div>      <!-- EMAIL FIELDS -->     <div ng-if="field.type=='email'" class="form-group">       <label class="col-sm-2 control-label">{{field.label}}</label>       <div class="col-sm-6">         <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" class="form-control" required/>          <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>          <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'}}">Not email!</span>       </div>     </div>      <!-- PASSWORD FIELDS -->     <div ng-if="field.type=='password'" class="form-group" >       <label class="col-sm-2 control-label">{{field.label}}</label>       <div class="col-sm-6">         <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" ng-minlength={{field.min}} ng-maxlength={{field.max}} class="form-control" required/>          <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>          <span data-ng-show=" {{'!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' }}">Passwords must be between 8 and 20 characters.</span>         </div>     </div>      <!-- SELECT FIELDS -->     <div ng-if="field.type=='select'" class="form-group" >       <label class="col-sm-2 control-label">{{field.label}}</label>       <div class="col-sm-6">         <select data-ng-model="field.data" ng-options="option.name for option in field.options" class="form-control" required/>       </div>           </div>      <!-- RADIO FIELDS -->     <div ng-if="field.type=='radio'" class="form-group">       <label class="col-sm-2 control-label">{{field.label}}</label>       <div class="col-sm-6">          <div class="checkbox" ng-repeat="option in field.options" >                   <label>                             <input type="radio" data-ng-model="field.data"  name="taskGroup"  id="{{option.name}}" value="{{option.id}}">{{option.name}}           </label>                 </div>       </div>     </div>      <!-- CHECKBOX FIELDS -->     <div ng-if="field.type=='checkbox'" class="form-group" >       <label class="col-sm-2 control-label">{{field.label}}</label>       <div class="col-sm-6">                        <div class="checkbox" ng-repeat="option in field.options" >                   <label>                     <input type="checkbox" data-ng-model="option.data"  name="taskGroup"  id="{{option.name}}" value="{{option.id}}" >{{option.name}}                   </label>                 </div>        </div>     </div>    </ng-form>   </div>     <br/>   <button ng-disabled="myForm.$invalid" type="submit" id="submit">Submit</button>   <br/>   <pre>{{entity|json}}</pre>    <br/>   </form> 

.js

app.controller('DynamicFormController', function ($scope, $log) {        // we would get this from the api     $scope.entity = {       name : "Course",        fields :         [           {type: "text", name: "firstname", label: "Name" , required: true, data:""},           {type: "radio", name: "color_id", label: "Colors" , options:[{id: 1, name: "orange"},{id: 2, name: "pink"},{id: 3, name: "gray"},{id: 4, name: "cyan"}], required: true, data:""},           {type: "email", name: "emailUser", label: "Email" , required: true, data:""},           {type: "text", name: "city", label: "City" , required: true, data:""},           {type: "password", name: "pass", label: "Password" , min: 6, max:20, required: true, data:""},           {type: "select", name: "teacher_id", label: "Teacher" , options:[{name: "Mark"},{name: "Claire"},{name: "Daniel"},{name: "Gary"}], required: true, data:""},           {type: "checkbox", name: "car_id", label: "Cars" , options:[{id: 1, name: "bmw"},{id: 2, name: "audi"},{id: 3, name: "porche"},{id: 4, name: "jaguar"}], required: true, data:""}         ]       };        $scope.submitForm = function(){         $log.debug($scope.entity);       } })    .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);         }     } })