antonyboom antonyboom - 3 months ago 11
AngularJS Question

Cannot set property 'key' of undefined angular ng-repeat

I'm trying to create modal form. Some fields for this form are standards and some of this fields are custom and come from api request.

{
"model": {
"eventTypeId": 1,
"occuredDate": "2016-08-16T19:58:00.965+0000",
"categories": []
},
"fields": [
{
"key": "siteId",
"type": "input",
"templateOptions": {
"label": "Site Id",
"placeholder": "Site Id"
}
},
{
"key": "patientId",
"type": "input",
"templateOptions": {
"label": "Patient Id"
}
},
{
"key": "visitNumber",
"type": "select",
"templateOptions": {
"label": "Visit Number",
"options": [
{
"name": "Screening",
"value": "Screening"
},
{
"name": " Period 1 Day 0",
"value": " Period 1 Day 0"
},
{
"name": " Period 1 Day 2",
"value": " Period 1 Day 2"
},
{
"name": " Period 2 Day 0",
"value": " Period 2 Day 0"
},
{
"name": " Period 2 Day 2",
"value": " Period 2 Day 2"
},
{
"name": " Period 3 Day 0",
"value": " Period 3 Day 0"
},
{
"name": " Period 3 Day 2",
"value": " Period 3 Day 2"
},
{
"name": " Period 4 Day 0",
"value": " Period 4 Day 0"
},
{
"name": " Period 4 Day 2",
"value": " Period 4 Day 2"
},
{
"name": "Unscheduled",
"value": "Unscheduled Visit"
}
]
}
},
{
"key": "sourceSystemRecordId",
"type": "input",
"templateOptions": {
"label": "System Record Id",
"placeholder": "Source System Record Id"
}
}
]
}


Without custom fields form works great, I can fill any fields and it will be post, however I try to fill custom fields, I get an error


TypeError: Cannot set property 'key' of undefined


The template for custom fields looks like:

<div class="row">
<div class="col-md-4" ng-repeat="(key, value) in vfields">
<div ng-if="vfields[key].type == 'input'">
<div class="form-group">
<label for="fieldId">{{vfields[key].templateOptions.label}}</label>
<input type="text"
class="form-control"
id="fieldId"
placeholder="{{vfields[key].templateOptions.placeholder}}"
ng-model="vmodel.vfields[key].key"
>
</div>
</div>
<div ng-if="vfields[key].type == 'select'">
<div class="form-group">
<label for="fieldId">{{vfields[key].templateOptions.label}}</label>
<select class="form-control"
id="fieldId"
ng-options="item.value as item.name for item in vfields[key].templateOptions.options"
ng-model="vmodel.vfields[key].key">
</select>
</div>
</div>
</div>
</div>


What I'm trying to achieve that my post object looked like (except standards fields):

object = {
title = text,
description = text,
vfields[key].key = some text or option value (for each custom fields)
}


this is my plunker with my error, I appreciate if anybody could help me to find my problem.

Answer

Instead of accessing members with dot notation ' . ', use accessing them with bracket notation ' [ ] '.

The dot notation only works with property names which are valid identifier names [spec], so basically any name, would also be a valid variable name

Bracket notation expects an expression which evaluates to a string, so you can use any character sequence as property name.

Your ng-model should look like: ng-model="vmodel[vfields[key].key]" Also you have a deal with simple array inside, there is no necessary to use (key, value), just simple ng-repeat='your name' in vfields

This is your fixed plunker