I have implemented a custom checkbox as a child component within a parent component. I properly pass the ngModel, name, etc., and attempt to update the model with a boolean status (true/false) based on the checkbox status using an EventEmitter.
However, the status I receive is "on" as a string instead of a boolean.
When inspecting the status and the event in the Chrome console, everything seems to be working correctly and displaying the expected result. The issue lies in the model and two-way binding receiving a string value, notably "on". This string persists even when unchecking the checkbox, with no indication of "off" being recognized.
child.component.html:
<input type="checkbox"
name="{{passCheckBoxName}}"
#ngForm="ngModel"
[ngModel]="model"
(ngModelChange)="onChange($event)"
required>
child.component.ts:
@Input() model: boolean;
@Output() modelChange: EventEmitter<any> = new EventEmitter();
onChange(event) {
console.log('this.model: ' + ${this.model});
this.model = event;
// event.checked doesn't work for me. output then is undefined
// this.model = event.checked;
console.log(event);
this.modelChange.emit( event );
// event.checked doesn't work for me. output then is undefined
// this.modelChange.emit( event.checked );
}
parent.component.html:
<child-checkbox [parentFormGroup]="form"
[name]="'nameOfCheckbox'"
[ngModel]="name""
ngDefaultControl>
</child-checkbox>