angularformsngx-formly

Angular: handling component add to form event


I'm using formly to get form from json sent by back. Consider the following form description

{
    "key": "key_radio",
    "type": "radio",
    "templateOptions": {
        "required": true,
        "options": [
            {
            "value": true,
            "label": "Yes"
            },
            {
            "value": false,
            "label": "No"
            }
        ]
    }
},
{
    "fieldGroupClassName": "row",
    "hideExpression": "!model.key_radio",
    "fieldGroup": [
        {
            "key": "key_a",
            "className": "col-3",
            "type": "input",
        },
        {
            "key": "key_b",
            "className": "col-4",
            "type": "input"
        },
        {
            "key": "key_c",
            "className": "col-4",
            "type": "input"
        }
    ]
}

By default inputs are hidden with hiddenExpression. After "Yes" radio-button is clicked inputs are shown. When a value is entered in first input (key_a) I need to do request to backend and fill two other inputs. Listening form.get('key_a').valueChanges is a natural solution here. Still I don't know where can I setup this subscription. So the question is: how can I handle inputs add after "Yes" radio-button click and hideExpression evaluate?


Solution

  • If someone be reading this, I've found the answer.

    One can pass a fieldChanges Subject and subscribe to it. Formly emits FormlyValueChangeEvent in this subject when hideExpression is evaluated. With that said, all you need is to subscribe to that Subject and do form.updateValueAndValidity() in the subscription