Issues with mat-input functionality within a mat-table in Angular 8

I'm encountering an issue with my mat-table. The input field within the table is not functioning properly. All rows are sharing the same input field, so when I type text into the box, it appears in all rows.

Here is my code:

<ng-container matColumnDef="Remarks">
    <mat-header-cell *matHeaderCellDef>scheduled hours</mat-header-cell>
    <mat-cell *matCellDef="let element">  
        <mat-form-field>
            <input matInput [(ngModel)]="Remarks" (input)="$event.target.value.length > 2 && Remarks($event.target.value)"  name="AppRemarks"  #AppRemarks="ngModel"  placeholder="Remarks"> &nbsp; &nbsp;
        </mat-form-field> 
    </mat-cell>
</ng-container>
angulartypescriptangular8mat-tablemat-input

Answer №1

Hello! The issue you're experiencing with the mat table is due to creating a table using the same variable with two-way binding for each row, causing them to have identical values.

To achieve your desired outcome, I recommend exploring Angular Reactive FormArrays.

Check out this helpful tutorial on how to use FormArrays in Angular:

Answer №2

Dealing with the same issue recently! It turned out that the culprit was the name attribute causing the problem. The name attribute serves to give the control a unique identifier, so by assigning the same name to each attribute, they end up sharing the same key and are treated as a single input.

Here's a simplified version to resolve your problem:

<ng-container matColumnDef="Remarks">
    <mat-header-cell *matHeaderCellDef>Remarks</mat-header-cell>
    <mat-cell *matCellDef="let element; let i = index;">  
        <mat-form-field>
            <input matInput [(ngModel)]="Remarks" name="AppRemarks{{ i }}">
        </mat-form-field> 
    </mat-cell>
</ng-container>

Answer №3

To correctly bind the value, use 

[(ngModel)]="AppRemarks"
because the input field has name= "AppRemarks"

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

Having trouble with React Hook Form controlled input and typing

My application utilizes the react-hook-forms library along with the office-ui-fabric-react framework. To integrate the framework inputs, I wrap the 3rd party component using the <Controller> element. The current setup is functional as shown below: ...

typescriptreact-hook-form

A step-by-step guide on injecting a model within the root app module of a Nest JS application

Hello, I encountered an error in my Nest app and here is a screenshot of the error: https://i.stack.imgur.com/zY1io.png Below is the code snippet for the AppModule: @Module({ imports: [AppModule,CrudModule,MongooseModule.forRoot("mongodb://localhost:2 ...

typescriptjwtnestjs

The Angular AOT compilation process is causing essential code to be stripped away from the openlayers

We have recently updated our project to use Angular 7 along with openlayers 5.3, and so far everything has been running smoothly. In an effort to improve initial loading times, we implemented several optimizations during the build process, including enabli ...

angularopenlayersaot

The service.subscribe function in Angular's Component Constructor is not functioning properly after the update

There are two components in my project, a parent and child component, and I am using a shared service to transfer data between them. The structure of the Service Class is as follows: export class AddItemDataTransferService { // Observable string sourc ...

angularangular-componentsangular5

Having trouble utilizing the Visual Studio Code debugger in an Express.js project that uses TypeScript

My package.json file is shown below: ` { "name": "crm-backend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev" ...

typescriptexpressdebuggingvscode-debuggernodemon

I want my Angular 2 application to redirect to the appropriate page when a user who is logged out attempts to access a page that requires them to be logged in

When a user is logged out in Angular 2 router and they try to navigate to a page that requires them to be logged in, I need the app.ts file to redirect them. I am utilizing typescript along with angular 2. Oddly enough, the redirection works for certain ...

typescriptangularangular2-routing

Utilize Office Scripts to update values across numerous worksheets

Looking for ways to improve the performance of this script, as it currently takes 45 seconds to run. Any ideas? function main(workbook: ExcelScript.Workbook) { try { const sheets = workbook.getWorksheets(); for (let sheet of sheets) { const break ...

javascriptexceltypescriptperformanceoffice-scripts

Update Observable by assigning it a new value of transformed information using the async pipe and RXJS

My service always returns data in the form of Observable<T>, and unfortunately, I am unable to modify this service. I have a button that triggers a method call to the service whenever it is clicked. This action results in a new Observable being retu ...

angulartypescriptrxjs

Upon creation, SockJS and Stomp immediately terminate the connection

I am facing an issue with establishing WebSocket connection between Angular and Spring Cloud. The connection gets established but closes immediately after creation. I am not sure what might be causing this problem. Any insights? Here are the Angular depen ...

angularwebsocketspring-cloudstompsockjs

Angular2 and the complexity of deeply nested JSON

As a newcomer to Angular2, I am struggling to figure out how to display my JSON data using Angular2. Here is the JSON data I am working with: { "logoEditorData":{ "logo":{ "companyNameOption":{ "fontSize":{ "c ...

jsonangular

Tips on utilizing Selenium with Java to locate and interact with elements on an Angular web application

I'm facing challenges with automating an Angular web app. Despite trying simple code, it still isn't working. Here's an example of my code: @BeforeClass public void setUp() { ChromeOptions options = new ChromeOptions(); ...

javaangularselenium-webdriver

Exploring the depths of nested JSON with Angular2

I'm a beginner in Angular 2 using Typescript. I am trying to figure out how to access the 'D' and 'G' elements in my JSON data using NgFor. Is there a specific way or method that I can use to achieve this? [ { "A":"B", "C" ...

angularjsjsontypescriptangularngfor

The compatibility issue arises when trying to utilize Axios for API calls in Ionic 6 React with react-query on a real Android device in production. While it works seamlessly on the emulator and browser

My form utilizes react-hook-form to submit data to a server. Here is the code: <FormProvider {...methods}> <form onSubmit={handleSubmit(onIndividualSignup)}> <Swiper onSwiper={(swiper) => setSlidesRef(s ...

reactjstypescriptaxiosreact-queryionic6

Can social login be used to add Firebase users to the user database?

When a user logs in through a social provider like Facebook, does Firebase automatically include them in the Firebase Authentication/User database? In simpler terms, if Christine signs in with Facebook, will Firebase save her Email address, first name, et ...

angularfirebasefirebase-realtime-databasefirebase-authentication

Import JSON data into Angular 2 Component

After much effort, I have finally figured out how to load JSON data into an Angular 2 Component. datoer.service.ts: import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from ...

jsonangulartypescript

The function column.getHeaderGroupProps does not seem to be available

Struggling with the initial setup of react-table with typescript. I keep encountering an error related to the data passed into my table function: column.getHeaderGroupProps is not a function TypeError: column.getHeaderGroupProps is not a function at ht ...

reactjstypescriptmaterial-uireact-table

Casting types of objects in Angular2 using TypeScript

Trying to extract the model object from the JSON obtained through a http response call. The following JSON represents the body of the http response, { "dataType": "RWSupplier", "partyName": "Lifecare Pharmaceuticals", "partyShortName": null, "partySecon ...

jsontypescriptangular2-routing

The concept of passing arguments in Typescript

During my experience with Typescript programming, I encountered a situation like the one described below. If I pass an argument containing an object with the same name as the parameter defined in the function signature, Typescript recognizes it, but not ...

typescript

Communication between Angular services and the issue of 'circular dependency detected' alerts

I am encountering a circular dependency issue with my AuthenticationService and UserService. The UserService is included within the AuthenticationService, but when I try to use AuthenticationService in UserService as shown below: constructor(private authS ...

angulartypescriptcircular-dependency

Is it possible to transfer the security measures from Angular 6 to Angular 9?

Is it necessary to update my Angular project from version 6 to 7 before moving on to the latest version, or can I upgrade directly to the most recent version of Angular? ...

angular