Angular formly: calculate value of one field based on other fields input - angular-formly

Question

json configuration:
{
"moduleconfigs": {
"create": [
{
"key": "Committed",
"type": "horizontalInput",
"templateOptions": {
"label": "Committed"
}
},
{
"key": "Uncommitted",
"type": "horizontalInput",
"templateOptions": {
"label": "Uncommitted"
}
},
{
"key": "Line",
"type": "horizontalInput",
"templateOptions": {
"label": "Line"
}
},{
"key": "Total",
"type": "horizontalInput",
"templateOptions": {
"label": "Total"
},
"expressionProperties":{
"value": function($viewValue, $modelValue, scope){
return scope.model.lineFill+scope.model.uncommitedBPD+scope.model.commitedBPD;
}
}
}
]
}
}
html:
<form>
<formly-for model="vm.myModel" fields="vm.myFields"></formly-form> </form>
I am new to angular formly. I am creating form using angular formly json. Total field should display sum of values provided in Committed+Uncommitted+Line fields. i am using expressionProperties but is not working.

Answer 1

I'm guessing you've moved on from this issue... however...
You are doing two things wrong.
First (1): They key value in the formly field configuration object is setting the value by that name on the model.
So your first field configuration object is:
{
"key": "Committed",
"type": "horizontalInput",
"templateOptions": {
"label": "Committed"
}
},
Then later you try to access that value using the key commitedBPDso you'll always get undefined.
Basically formly is setting the value input in that field on the model object with the key of Committed you need to change the key to match.
Second (2): I could be wrong but I don't think you can use an expression property to set the value like that. Formly will automatically respect value changes on the model so you're better off putting on onChange on the other formly field configuration objects that does the parsing and addition something like this:
{
"key": "Committed",
"type": "horizontalInput",
"templateOptions": {
"label": "Committed"
"onChange": addTotal
}
}...
function addTotal() {
//You have access to the model here because it's in your controller
// NOTE: the parseInput function you'll have to write yourself
vm.model.Total = parseInput(vm.model.Committed) + ...
}
All in all your biggest problem is trying to access the values from the model object with the wrong key

Answer 2

Yes, updating the model does not change form.input.value
The only way I've found is like this:
item.fieldGroup['Import'].formControl.setValue(333.33)