HTML form does is not generated in angular scope

I am trying to generate a html form with angularjs ngRepeat. I load a JSON file that contains the fields of desired form and save this object in my $scope. I have a ngRepeat element that generates form inputs based on the JSON object.
The problem is when I print $scope.<myFormName> it just have one field name “{{header.name}}” as I expect some fields based on my JSON model.
Actually I see the form generated in html properly but the same thing does not happen in angular scope.

angular.module("myApp",[])
  .controller("myCtrl",["$scope",function($scope){
    //  In this funtion I Set fields of form and make my model empty
    $scope.getHeaders = function () {
                console.info('getHeaders');
                $scope.headersForCreation =     [
                    {
                        name: 'givenName',
                        type: 'string',
                        caption: "nameAndFamily"
                    },
                    {
                        name: 'userName',
                        type: 'string',
                        caption: "userName"
                    },
                    {
                        name: 'password',
                        type: 'password',
                        caption: "password"
                    },
                    {
                        name: 'passwordConfirm',
                        type: 'password',
                        caption: "passwordConfirm"
                    },
                    {
                        name: 'mail',
                        type: 'string',
                        caption: "email"
                    },
                    {
                        name: 'mobile',
                        type: 'string',
                        caption: "mobile",
                        regex: '0[1-9][0-9]{9}'
                    }
                ];
                $scope.userInputsInCreation = {};
                angular.forEach($scope.headersForCreation, function (headerItem, key) {
                    $scope.userInputsInCreation[headerItem.name] = '';
                });
            };  //  end of get header
    
    $scope.getHeaders();
    console.log($scope.createForm)
  }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl"  id="add-container-access" ng->
    <form class="form-horizontal" name="createForm" init="getHeaders()">
      
        <div class="form-group"  ng-repeat="header in headersForCreation" >
          <label for="id-{{header.name}}" class="col-sm-4 control-label">
                {{header.caption}}: </label>
            <div class="col-sm-8"
                 ng-class="{'has-error': createForm.{{header.name}}.$error.$invalid }">
                <input type="header.type"  class="form-control"
                       name="{{header.name}}" ng-required="{{header.notNull}}"
                       id="id-{{header.name}}" 
                       ng-model="userInputsInCreation[header.name]" >
            </div>
            
        </div>

        <div class="form-group">
            
            <div class="col-sm-2">
                <button class="btn btn-default" >
                    ADD
                    <i class="glyphicon glyphicon-plus-sign"></i>
                </button>
            </div>
        </div>
    </form>
    
  
</div>


Source: forms

Leave a Reply