how to detect the checkbox checked event in formly angular7? - checkbox

Question

Using formly and Json I created one form. Now I want display a text box when I checked the check box.
I tried with ngDoCheck() method, but I was unable to display the text. The box.this method hitted every field click event, although I need checked event only. Can any one help me out this.
"createConfig": [
{
"columnName": "chkid",
"columnSize": 50,
"columnType": 5,
"discreteValues": null,
"displayName": "",
"filterType": "e",
"isEnabled": 1,
"isMultiSelect": 0,
"isRequired": 0,
"isVisible": 1,
"listDataProvider": null,
"position": 2,
"showSuggestion": 1,
"sizeUnit": "px",
"useDisplayValueOnly": 1
},
{
"columnName":"nonusaddresa",
"displayName": "Address1/Address2/City/State/Zip/PostalCode/Country",
"position": 2,
"columnType": 1,
"isSortable": 0,
"defaultSortOrder": null,
"columnSize": 800,
"sizeUnit": "px",
"isVisible": 0,
"isEnabled": 1,
"isRequired": 0,
"isMultiSelect": 0,
"showSuggestion": 1,
"useDisplayValueOnly": 1,
"filterType": "e",
}
]

Answer 1

Subscribe to valueChanges of form
<formly-form #formlyForm
[model]="configModel"
[fields]="fields">
</formly-form>
#ViewChild(FormlyForm) public formlyForm: FormlyForm;
public ngAfterViewInit() {
this.formlyForm.form.valueChanges
enter code here
}
Don't forget to unsubscribe:
.pipe(this.readUntilDestroyed())

Answer 2

I had the same problem.
Even in 2022, I had to find a workaround based on id generated by formly-form and the click event _ eg.
this.app.objects[0].data.presentation[2][0].templateOptions.click = (field, event) => {
if (event.target.firstChild.id === 'formly_9_multicheckbox_foo_0_5-input') { // the sixth checkbox
// Notice : it was inverted because the checked is before setting value
if (event.target.firstChild.checked) {
// enabled another field
this.app.objects[0].data.presentation[3][0].templateOptions.disabled = false;
} else {
// disabled another field
this.app.objects[0].data.presentation[3][0].templateOptions.disabled = true;
}
}
};
This example is with multicheckbox.

Answer 3

You need to have (change) event on input to see if the checkbox is checked or not
<input type="checkbox" (change)="checkMethod($event)">
In your ts file
checkMethod(event)
{
if(event.target && event.target.checked)
{
//this means input is checked
}
}