2

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.

2
  • Are you sure you've loaded the ReactiveFormsModule? (Just adding a docs link as reference) Commented Feb 27, 2024 at 18:38
  • can u give me entire code ? Commented Feb 29, 2024 at 13:44

2 Answers 2

1

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.

Sign up to request clarification or add additional context in comments.

Comments

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"

1 Comment

Okay, but that's template-driven forms. Your question seems to be about reactive forms, since you're using formControlName

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.