Even though the model value is set to true, the material check box remains unchecked

My mat-table contains data and checkboxes. The checkboxes should only be checked when the element.select property is true. However, when I use [(ngModel)]="element.select", all the checkboxes end up getting checked. Below you can find the code snippet:

<td mat-cell *matCellDef="let element">
   {{element.select}}
   <mat-checkbox [(ngModel)]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>
</td>

I'm struggling to identify what's wrong with this code. Any insights would be appreciated.

I have also attempted to use property binding like [checked]="model.select", but unfortunately, it doesn't seem to work either.

The goal is to have the checkbox checked only when element.select is set to true.

javascripthtmlcssangular

Answer №1

It seems like you have a combination of reactive forms using formControlName and template driven forms using ngModel, which may be causing some issues.

To resolve this, I suggest removing the formControlName and see if that resolves the problem.

Check out this example without using formControlName: https://stackblitz.com/edit/angular-stack-checkboxtable-55568107 (This example is based on the material's own example)

In the provided example, you can observe that using [(ngModel)] works as intended, while introducing formControlName causes unexpected behavior.

Answer №2

Make sure to include the [checked] attribute in the checkbox element as [checked]="element.select" :

<mat-checkbox [(ngModel)]="element.select"  [checked]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>

Answer №3

If you want to determine whether a checkbox should be checked based on the condition of element.select, make sure to bind your property using [checked]=element.select instead of model.select. Here is an example:

<td mat-cell *matCellDef="let element">
    {{element.select}}
  <mat-checkbox [(ngModel)]="element.select" [checked]="element.select" formControlName="select" (change)="checkIfAllSelected()"></mat-checkbox>
</td>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with extended waiting times in polling

I am currently working on a chatroom using the long poll method. However, I'm facing an issue where every time a long poll occurs and I refresh the page in Chrome or try to send another async request, everything times out. This means I can't load ...

phpjavascriptajaxcomet

Request for removal in Express.js

Currently in the process of developing a MERN-stack app, but encountering issues with the delete request function. Here is the relevant code snippet: Upon attempting to send a delete request via Postman, an error message is displayed. I have researched ...

javascriptnode.jsexpressmern

attempting to refine an array of objects using another array within it

I am currently filtering a group of objects in the following manner: [ { "Username":"00d9a7f4-0f0b-448b-91fc-fa5aef314d06", "Attributes":[ { "Name":"custom:organization", "Valu ...

javascriptarraystypescriptfilter

Utilizing Socket.io within secured routes

I'm currently working on a web application that involves user authorization and the ability to chat with others. I've encountered an issue where, despite including e.preventDefault() in my JavaScript code for the submit button, the page still ref ...

javascriptnode.jsexpresswebsocketsocket.io

What is the process of importing a JSON data file and utilizing it within a React component?

As a beginner in React, I am struggling with the concepts of importing, exporting, and rendering components. I have a fakeData.json file within the same src/components folder as the component I want to render. Let's take a look at the structure: < ...

javascriptjsonreactjs

Unable to establish an external connection with the node

Currently, I am in the process of establishing a connection to a local server and running an app on port 8080 using node. Both node and apache are installed on my system. When Apache is active, I can access the server externally. However, when Node is runn ...

javascriptnode.jsapacheexpress

Awaiting a response from the http.get() function

Currently, I am in the process of creating a login feature using Angular and Ionic 2. This feature aims to verify if the user is registered in the database through a PHP server and return a user ID. However, I have encountered an issue with the asynchronou ...

javascriptangularionic-frameworkionic2promise

Nextjs version 13 encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

I am currently utilizing the latest version 13.1.0. I have implemented a ContextProvider that allows switching between light and dark themes. 'use client'; import { Theme, ThemeContext } from '@store/theme'; import { ReactNode, useState ...

javascriptreactjsnext.jslocal-storage

How can you establish an environmental variable in node.js and subsequently utilize it in the terminal?

Is there a way to dynamically set an environmental variable within a Node.js file execution? I am looking for something like this: process.env['VARIABLE'] = 'value'; Currently, I am running the JS file in terminal using a module whe ...

javascriptnode.jsvariablesenvironment-variables

Bringing in PeerJs to the NextJs framework

Currently delving into NextJs and working on creating an audio chat application, I've hit a roadblock while attempting to import PeerJs. An error message keeps popping up saying 'window is not defined'. import Peer from 'peerjs'; ...

javascriptreactjsnext.jspeerjs

The information seems to not be getting transferred to the req.body variables from the HTML form

Within my server-side settings using knex and express, I have defined the following function: // POST: Create new users app.post('/add-user', (req, res) => { const {firstName, lastName, emailAdd, gender, dob, password} = req.body; cons ...

javascriptnode.jsreactjsexpressknex.js

Utilizing JavaScript recursion to navigate through a JSON object and update specific key-value pairs on its nested children

Exploring a JSON object structure that follows a tree-like child-parent relationship. Each node in the structure has a unique ID. Attempting to iterate through the entire object using a recursive function, encountering challenges with handling the children ...

javascriptjsontypescriptrecursion

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

javascripthtmlcssnode.jsexpress

Analyzing an HTTP response containing a Content-Type header specifying image/jpeg

Currently, I am developing my first web application and the task at hand involves loading an image from a database and sending it to the client for display. On the server side, I have the following code: res.setHeader('Content-Type', pic.mimetyp ...

javascriptajaxexpress

Choosing several buttons in typescript is a skill that every programmer must possess

I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this? var input = document.getElementById('input'); var result = document.getElementById('result'); v ...

javascripthtmlcsstypescript

Exploring Ways to Utilize Multiple Access Levels with PHP and MySQL

Currently, I am developing a PHP & MySQL management system for a college level institution. In this system, each employee and student will have their own account and I aim to display personalized pages for each user. In my scenario, there are 3 levels o ...

phphtmlmysql

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them a ...

javascriptangulartypescriptrxjs

Power Punch - Interactive Click Functionality

My question pertains to the click binding in Knockout and a specific behavior that I have observed. While there are numerous questions about click bindings on this platform, none seem to address the behavior I am encountering. I have grasped that in Knock ...

javascriptknockout.jsdata-binding

Is it possible to utilize a variable as a column name in MySQL when working with Express?

At the moment, I am encountering an issue where the table name is surrounded by quotation marks as it is a string. This causes the server to crash. const update = 'the name of my column'; const UpdateQuery = `UPDATE scores SET ${mysql.escap ...

javascriptmysqlnode.jsexpress

Move each four-character IT value to a new line

const maxNumLength = 4; event = jQuery.Event("keypress") event.which = 13 $('#input').on('input focus keydown keyup', function() { const inputValue = $(this).val(); const linesArray = inputValue.split(/(&bsol ...

javascript