Html Question posted in
Some basic documentation can be found here.

Html – Angular 9 – Checkbox value updates inside component but does not get checked in the UI

After upgrading my project from Angular 8 to 9 I’ve encountered some problems in the UI. The one that I seem not to figure out is the fact that checkboxes are not getting ‘checked’ when their value is true.

Here’s the HTML for the checkbox

 <input disabled type="checkbox" style="width: 20px;height: 20px;margin-top: 35px;" class="form-control"
            formControlName="checkboxToCheck">

I’ll leave here the contents of my package.json in case someone can point out that I’m using some dependency that can generate this bug

"dependencies": {
    "@angular/animations": "^9.0.1",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "^9.0.1",
    "@angular/compiler": "^9.0.1",
    "@angular/core": "^9.0.1",
    "@angular/forms": "^9.0.1",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^9.1.13",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "^9.0.1",
    "@angular/platform-browser-dynamic": "^9.0.1",
    "@angular/router": "^9.0.1",
    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
    "@ng-select/ng-select": "3.7.2",
    "@ngx-translate/core": "11.0.0",
    "@ngx-translate/http-loader": "4.0.0",
    "@types/html2canvas": "^1.0.0",
    "angular2-toaster": "^7.0.0",
    "chart.js": "^2.8.0",
    "core-js": "^2.5.4",
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html-to-pdfmake": "^2.4.9",
    "html2canvas": "^1.4.1",
    "igniteui-angular": "^9.0.0",
    "jquery": "^3.3.1",
    "jspdf": "^2.5.1",
    "moment": "^2.27.0",
    "ng2-charts": "~2.2.3",
    "ngx-custom-validators": "^6.0.0",
    "ngx-gallery-9": "^1.0.6",
    "pdfmake": "^0.2.6",
    "popper.js": "^1.14.4",
    "querystring": "^0.2.1",
    "rxjs": "~6.5.4",
    "webpack": "^4.39.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "^9.0.1",
    "@angular/language-service": "^9.0.1",
    "@nativescript/schematics": "^9.0.0",
    "@types/jasmine": "~3.5.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~13.7.1",
    "codelyzer": "<7.0.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslib": "^1.10.0",
    "tslint": "~5.11.0",
    "typescript": "3.8.3",
    "webpack-dev-server": "^5.0.1"
  }

With the use of a (click) method I had the value of the checkbox printed in console and I see it being either true or false so it is working in the component.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Update. Form some reason passing argument "checked" or "ngModel" with variable would update the component but not the UI. I solved the problem by using two way binding [(ngModel)] and passing directly the reference to the form control value:

    [(ngModel)]="this.myForm.controls['checkboxName'].value"

  2. 0

    Try to rerender the Checkbox.

    I had one issue that the internal render state of the checkbox isn’t the same you pass into them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search