Angular formly - assign key to property in array - arrays

Question

I am working on list of languages and levels of proficiency. This would be a array of objects:
languages : [
{ name : 'English', level : 'native' },
{ name : 'Spanish', level : 'good' }
]
So I have such definitions of fields:
{
className : 'col-xs-4',
type : 'ui-select',
key : 'languages[' + index + '].name',
templateOptions : {
label : 'Some label',
options : [ ... data there ... ],
required : true
}
},
{
className : 'col-xs-8 btn-radio-language',
type : 'btn-radio',
key : 'languages[' + index + '].level',
templateOptions : {
label : 'Proficiency',
options : ... data for native, good, so so ...
}
}
Those definition would repeat several times with respect of index.
However instead of array languages being addressed with values series of properties in model like:
"languages[0].level": "native",
"languages[1].level": "advanced",
"languages[0].name": "German"
have been created...
How I can point to languages array in model ?

Answer 1

If I've understood it correctly you could map your data with languages.map(function(language) {...}).
Please have a look at the demo below or at this jsfiddle.
angular.module('demoApp', ['formly', 'formlyBootstrap'])
.controller('MainController', function() {
var vm = this;
vm.model = {};
var languages = [
{ name : 'English', level : 'native' },
{ name : 'Spanish', level : 'good' }
];
var createOptionTmpl = function(value) {
return {
name: value,
value: value
};
};
/*
console.log(languages.map(function(lang) {
return {
name: lang.level,
value: lang.level
};
}));*/
vm.fields = [{
className: 'col-xs-4',
type: 'select',
key: 'languages.name',
templateOptions: {
label: 'Some label',
options: languages.map(function(lang) {
return createOptionTmpl(lang.name);
}), //[...data there...],
required: true
}
}, {
className: 'col-xs-8 btn-radio-language',
type: 'radio',
key: 'languages.level',
templateOptions: {
label: 'Proficiency',
options: languages.map(function(lang) {
return createOptionTmpl(lang.level);
})
}
}];
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/api-check/7.5.5/api-check.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly/7.3.9/formly.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/6.2.0/angular-formly-templates-bootstrap.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as vm">
<form ng-submit="vm.onSubmit()">
<formly-form model="vm.model" fields="vm.fields"></formly-form>
<button class="btn btn-primary">
submit
</button>
</form>
{{vm.model}}
</div>