mdb-checkbox is not unchecked from code


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.)


Bartosz Termena staff commented 5 years ago

Hi!

Could you show me your code? Best, 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


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

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.


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 commented 5 years ago

Fixed in 8.3.1 !


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: 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
Tags