How to make ng-model dynamic? - angularjs

Question

I'm making a dynamic registration form My dynamic form example. The data written in those inputs will be later sent to some API.
<div ng-repeat="item in CustomRegistrationForm"
class="form-group text-field-para" style="margin: 10px">
<input type="{{item.Type}}" id="{{'A'+$index}}"
class="form-control" name="{{TmpName}}"
ng-model="RegistationSubscriberData.User.CustomRegistrationForm[$index].Name">
</div>
CustomRegistration is a JSON made like this: https://jsoneditoronline.org/?id=5396efadcf9d475a9fee6e558e8b807c .
By my logic ng-models would have to be set (in my case) as: "FirstName", "Email", "GSMnumber",... But it just saves as the last string in the ng-model, in my case "Name". I tried to use item.Name also but it didn't make any difference. Also if I tried to "console.log(CustomRegistration[0].Name)" it worked perfectly and output "FirstName"
Can someone explain to me why in this case my 'type' works perfectly (Dynamicly) but ng-model can't work with dynamic variable. This is my first question here so if I made any mistakes I apologise in advance.

Answer 1

You have to create array for the ng-model then you can add dynamically into that array as below.
<div ng-app ng-controller="TestController">
<div ng-repeat="item in CustomRegistrationForm" class="form-group text-field-para" style="margin: 10px">
<input type="{{item.Type}}" id="{{'A'+$index}}"
class="form-control" name="{{TmpName}}"
ng-model="Users[item.Name]">
</div>
<p> {{Users}} </p>
</div>
In Controller
function TesyController($scope) {
$scope.RegistationSubscriberData = {};
$scope.CustomRegistrationForm = [
{
"Label": "First name",
"Name": "FirstName",
"Type": "text",
"Mandatory": true,
"Length": 20,
"showPlaceHolder": false,
"Regex": "/^[a-z ,.'-]+$/i",
"Validator": "",
"requireRetypePassword": false,
"strengthValidatorEnabled": false,
"strengthComplexityLevel": false,
"Format": ""
},
{
"Label": "Email",
"Name": "Email",
"Type": "email",
"Mandatory": true,
"Length": "",
"showPlaceHolder": false,
"Regex": "",
"Validator": false,
"requireRetypePassword": false,
"strengthValidatorEnabled": false,
"strengthComplexityLevel": false,
"Format": ""
},
{
"Label": "Phone number (international format)",
"Name": "GSMNumber",
"Type": "text",
"Mandatory": false,
"Length": "",
"showPlaceHolder": false,
"Regex": "/^[a-z ,.'-]+$/i",
"Validator": "",
"requireRetypePassword": false,
"strengthValidatorEnabled": false,
"strengthComplexityLevel": false,
"Format": ""
},
{
"Label": "Password",
"Name": "password",
"Type": "password",
"Mandatory": true,
"Length": "",
"showPlaceHolder": false,
"Regex": "",
"Validator": false,
"requireRetypePassword": true,
"strengthValidatorEnabled": true,
"strengthComplexityLevel": false,
"Format": ""
}
]
}
For reference you can refer below fiddle links
fiddle
fiddle 2
Hope this will help you.