Topic: mdb-checkbox is not unchecked from code
itay pro asked 5 years ago
Expected behavior
this.form.patchValue({cb:false}) should uncheck an mdb-checkbox element display (remove the check mark)
Actual behavior
The checkbox remains marked as checked although this.form.value.cb is marked as false
Resources (screenshots, code snippets etc.)
itay pro answered 5 years ago
In 8.3.1 release notes it says:
"Checkbox - resolved problem with checked state updates on ngModel value change,"
Is it related ?
itay pro answered 5 years ago
In my case I have a form. The form is split between several sub-sections, each in a sub component.
One such sub-section holds the check box and the form is an input to it using:
@Input() expense: FormGroup;
Setting the value of the cb is done in the sub-component
Everything but this works great
Bartosz Termena staff commented 5 years ago
Dear @itay
Could you provide all of your code (mainly sub component which holds the checkbox)? Or you could send entire app to me: b.termena@mdbootstrap.com
Best Regards, Bartosz.
Bartosz Termena staff answered 5 years ago
Dear @itay
I can't reproduce your problem, could you show me your TS code?
Below is my example, and everything looks fine:
<div class="container">
<div class="row">
<div class="col-md-12 mx-auto my-5">
<form [formGroup]="reactiveForm">
<mdb-checkbox formControlName="checked">Checked with FormControl</mdb-checkbox>
<mdb-checkbox formControlName="unchecked">Unchecked with FormControl</mdb-checkbox>
</form>
</div>
</div>
</div>
<button (click)="getCheckboxesValue()">click</button>
TS
reactiveForm: FormGroup = new FormGroup({
checked: new FormControl(true),
unchecked: new FormControl(false),
});
getCheckboxesValue() {
this.reactiveForm.patchValue({ checked: true });
}
ngOnInit() {
this.reactiveForm.patchValue({ checked: false });
}
I am waiting for your response. Best Regards, Bartosz.
itay pro answered 5 years ago
<div class="col-md-4">
<div class="md-form form-check">
<mdb-checkbox formControlName="bVAT0" tabIndex="-1" (change)="updateVAT()" [readonly]="bForceEdit">Select</mdb-checkbox>
</div>
</div>
I tried to remove the [readonly], although bForceEdit is false and it didn't change. The check box remained unchecked after updating the value to true
It is worth mentioning that after setting the cb to true and clicking it it remains off. clicking again ticks it on so the value is false, just the tick is not shown
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.2.0
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 5 years ago
Hi!
Could you show me your code? Best, Bartosz.