Angular js 1.5 base

JSON driven Form elements Angular js

by rahulsemwal1991

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div id="body">
  <div ng-controller="FrameController as vm">
     {{message}}
    <br>
    <form name="userForm" novalidate>
      <span>--------USER FORM--------</span>
      <div class="" ng-repeat='z in formMeta track by $index' ng-switch on="z.ele">
        <!--simple-input-->
        <div class="form-group row justify-content-left" ng-switch-when="input">
          <label for="inputEmail3" class="col-sm-12 col-form-label text-left" ng-bind="::z.label + ' *'"></label>
          <div class="col-sm-4">
            <input type="{{z.type}}" name="z.name" class="form-control" placeholder="" ng-init="formModel[z.name] = z.value" ng-model="formModel[z.name]" ng-required="z.required">
          </div>
        </div>
        <!--Radio-->
        <div class="form-group row justify-content-left" ng-switch-when="radio" style="margin-bottom:0;">
          <label for="inputEmail3" class="col-sm-12 col-form-label text-left" ng-bind="::z.label + ' *'"></label>
          <div class="col-sm-12">
            <div class="form-check text-left" ng-init="formModel[z.name] = z.value">
              <label class="form-check-label" ng-repeat="o in z.options">
                <input type="radio" name="z.name" class="form-check-input" value="{{o.value}}" ng-model="formModel[z.name]" ng-required="z.required">
                <span ng-bind="o.label"></span>&nbsp;&nbsp;&nbsp;
              </label>
            </div>
          </div>
        </div>
          <!--RadioBlock-->
          <div class="form-group row justify-content-left" ng-switch-when="radioBlock" style="margin-bottom:0;">
            <label for="inputEmail3" class="col-sm-12 col-form-label text-left" ng-bind="::z.label + ' *'"></label>
            <div class="col-sm-12">
              <div class="form-check text-left" ng-init="formModel[z.name]['name'] = z.value">
                <label class="form-check-label" ng-repeat="o in...

JavaScript

angular.module('app', [])

.controller('FrameController', ['$injector', '$scope', function($injector, $scope) {
  var vm = $scope;
  vm.message = 'App running on Angular 1.5 version - stable';
  vm.formModel = {};
  //form metadata
  vm.formMeta = [{
    "ele": "input",
    "type": "email",
    "name": "email1",
    "label": "Email",
    "required": "true",
    "value": "",
    "editable": true
  },{
    "ele": "radio",
    "type": "radio",
    "name": "gender",
    "label": "Gender",
    "required": "true",
    "value": "",
    "editable": true,
    "options": [{
      "value": "male",
      "label": "Male"
    }, {
      "value": "female",
      "label": "Female"
    }]
  }, {
    "ele": "input",
    "type": "text",
    "name": "username",
    "label": "Username",
    "required": "true",
    "value": "",
    "editable": true
  }, {
    "ele": "input",
    "type": "text",
    "name": "pass",
    "label": "password",
    "required": "true",
    "value": "",
    "editable": true
  },
  {
    "ele": "radioBlock",
    "type": "radio",
    "name": "qualification",
    "label": "Qualification",
    "required": "true",
    "value": "",
    "editable": true,
    "options": [{
      "value": "graduate",
      "label": "Graduate"
    }, {
      "value": "post graduate",
      "label": "Post Graduate"
    }],
    "blocks": [{
        "pValue": "graduate",
        "ele": "input",
        "type": "text",
        "name": "colgName",
        "label": "College Name",
        "required": "true",
        "value": "",
        "editable": true
      }, {
        "pValue": "post graduate",
        "ele": "input",
        "type": "text",
        "name": "pColgName",
        "label": "Post G. College Name",
        "required": "true",
        "value": "",
        "editable": true
      }

    ]
  }]

}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});