Topic: Checkbox Intermittent Binding Failures

cory.maass free asked 4 years ago


For some reason this issue is showing as a Free user. I have an unlimited Pro license.

Expected behavior When edit model is set the checkbox should display the checked/unchecked status based on the boolean value it is bound to.

Actual behavior Approximately 25% of the time the binding will fail and the checkbox will display as unchecked when the value is true.

All of the other fields on the form bind properly. This is the only one that sometimes fails. This is happening on both forms in my application that accept user input and have checkboxes. In both cases these forms are on modals.

Resources (screenshots, code snippets etc.) Code from the form:

<mdb-checkbox
     name="isActive"
     [(ngModel)]="editModel.entity.isActive"
     [disabled]="formDisabled">
     Active
</mdb-checkbox>

Component code:

  postLoadEditModel(model: EditModel): void {
    this.editModel = model;
    this.editModelLoading = false;
    this.environmentClassId = String(this.editModel.entity.environmentClass);
    this.setFormDisabled(null);
    this.setFocus();
  }

Model Definition:

export class EditModelEntity {
  id: string;
  displayName: string;
  description: string;
  environmentClass: number;
  isActive: boolean;
  referenceName: string;
}

Bartosz Termena staff commented 4 years ago

Dear @cory.maass

Could you send me more of your code (value that is passed to ngModel - editModel, or some demo app to my e-mail? : b.termena@mdbootstrap.com) .

This will allow me to reproduce the problem exactly.

You can try to pass some primitive value (true/false) instead of nested object (editModel) to your checkbox ngModel

  • Send to my e-mail your order number, we will fix displaying you as a free user. Best Regards, Bartosz.

cory.maass free commented 4 years ago

Thank you Bartosz,

I have you more of the code along with a payload file from the HTTP request. This same payload file will randomly (or so it appears) fail or succeed to bind with the associated checkbox.

~Cory


Bartosz Termena staff answered 4 years ago


Dear @cory.maass

Thank you for email! I looked at your example.

The problem was on our side, it resulted from ChangeDetectionStrategy - OnPush in our checkbox.component.ts

We fixed it. Your problem should disappear with the next MDB version, but if something was still wrong - let me know.

Best Regards, Bartosz.


cory.maass free commented 4 years ago

Thank you for looking into it!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.2.0
  • Device: PC
  • Browser: Chrome , Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No