Generating a dynamic ngModel within an Angular 6+ application

Greetings! I am currently working on a table that adjusts its rows based on specific conditions.

<table id="totBudget">
      <thead>
        <tr>
          <th></th>
          <th>CC_1</th>
          <th>CC_2</th>
          <th>CC_3</th>
          <th>CC_4</th>
          <th>Total</th>
          <th>CC_NAME</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of source; let i= index">
          <td>{{item.name}}</td>
          <td><input type="text" class="{{item.value}}1" id="{{item.value}}1"></td>
          <td><input type="text" class="{{item.value}}2" id="{{item.value}}2"></td>
          <td><input type="text" class="{{item.value}}3" id="{{item.value}}3"></td>
          <td><input type="text" class="{{item.value}}4" id="{{item.value}}4"></td>
          <td><input type="text" class="{{item.value}}tot" id="{{item.value}}tot"></td>
          <td><input type="text" class="{{item.value}}cc" id="{{item.value}}cc"></td>
        </tr>
      </tbody>
    </table>

I'm looking to generate a dynamic ngModel with the same name as the id mentioned in each row, for example: {{item.value}}1. I'm unsure of how to create an ngModel for all inputs that rely on item.value and the table row. Any suggestions would be greatly appreciated!

Answer №1

To maintain the state of the table, you can create an object like this

TypeScript:

tableObject ={}

HTML:

        <tr *ngFor="let item of source; let i= index">
          <td>{{item.name}}</td>
          <td><input type="text" [(model)]="tableObject[item.value +'1']" class="{{item.value}}1" id="{{item.value}}1"></td>
          <td><input type="text" [(model)]="tableObject[item.value +'2']" class="{{item.value}}2" id="{{item.value}}2"></td>
...
        </tr>

Please let me know if this solution works for you

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

What is the best way to handle and showcase the retrieved values in ngOnInit through filtering?

Is it possible to display the values of fastFoodShopList, bakeryShopList, generalStoreList variables on the screen without actually showing them? Although I can confirm that the value is being retrieved using console.log, it seems like the screen is being ...

Attempting to run the command "npx typescript --init" resulted in an error message stating "npm ERR! could not determine executable to run."

What could be the reason behind the error message npm ERR! could not determine executable to run? Currently, I am attempting to set up a basic Node.js application using TypeScript and Yarn. Yarn is a tool that I am not very familiar with. These are the c ...

An Angular CDK overlay conflict occurring within a nested component

Incorporating the Angular CDK overlay into my project, I've successfully implemented a modal drawer and tooltips. However, I've encountered an issue when trying to close the drawer while a tooltip is still active within it. Upon pressing Escape ...

What is the method to utilize attributes from one schema/class in a separate schema?

Consider the scenario presented below: Base.ts import Realm from 'realm'; export type BaseId = Realm.BSON.ObjectId; export interface BaseEntity { id?: BaseId; createdAt: string; updatedAt: string; syncDetails: SyncDetails; } e ...

Restrict a class to contain only functions that have a defined signature

Within my application, I have various classes dedicated to generating XML strings. Each of these classes contains specific methods that take input arguments and produce a string output. In order to enforce this structure and prevent the addition of methods ...

Is it possible to create an object by utilizing a generic type?

Currently, I am dealing with a public RESTful API that provides objects containing URL fields leading to additional information. I wanted to encapsulate these fields within an object indicating their purpose so I devised the following structure: class API ...

The concept of Border-Merging within Material Design Tables

Is there a way to implement the following border style in a Material Design Table: border-collapse: collapse; I tried adding a border to .mat-cell: .mat-cell { border: 1px solid; } However, in some instances, the border appears to be 2px. The reas ...

Are you interested in creating dynamic tables/models with Sequelize?

Currently, I am exploring a theoretical question before diving into the implementation phase. The scenario is as follows: In my application, users have the ability to upload structured data such as Excel, CSV files, and more. Based on specific requirement ...

Issue with automatically importing Meteor packages as external libraries for .ts files

Trying to transition a Node project primarily written in TypeScript to Meteor 1.4 and encountering some difficulties. I have noticed that WebStorm is supposed to automatically import meteor when the option is selected, as explained on https://www.jetbrain ...

I can't find my unit test in the Test Explorer

I'm currently working on configuring a unit test in Typescript using tsUnit. To ensure that everything is set up correctly, I've created a simple test. However, whenever I try to run all tests in Test Explorer, no results are displayed! It appear ...

Having trouble looping through an array in Angular 2?

I am currently using a FirebaseObjectObservable to retrieve the value of a property from my firebase database. The property can have multiple values, so I stored them in a local array variable. However, I ran into an issue while trying to iterate through ...

When ng-test is executed in an Angular service, the function array.some is not found

After retrieving allUsers from the cache and initializing it, I then set the boolean value of specialUserExists based on a condition in allUsers using allUsers.some() (reference to the Array.prototype.some() method). service.ts @Injectable({ providedIn: ...

What are the steps to expand the express object with TypeScript?

I am facing an issue where, after compiling a typescript project, the express import import {Request, Response} is not showing up. I am now attempting to use require, but I am unsure of how to extend the express object and utilize req and res. Any assistan ...

The Angular CLI encounters issues when attempting to download Angular 6 dependencies through a proxy server

I have successfully set up Angular CLI using NPM behind a proxy with Fiddler. However, I am encountering an issue when trying to use the 'ng new' command with Angular CLI. It consistently fails to download certain dependencies and gives me an E50 ...

Retrieve specific files from a Firestore collection based on a particular field

I am currently working on a web application using Angular 6 and angularfire2. I have successfully retrieved all documents in a collection, but now I need to filter those documents to only get the ones with the field role.moderator == true. private users ...

Adding a dynamic, inheritable property to a class in real-time

Can we dynamically assign static inheritable properties to a class? (I am looking for a solution in Typescript for annotating properties that need to be stored within the Class and accessible in subclasses, but I believe this question is applicable to Jav ...

The validation status of Angular's custom form array remains in a PENDING state when utilizing asynchronous validators

I've created a custom asynchronous postal code validator that can be used with Template Driven forms. @Directive({ selector: '[appAsyncPostalCode]', providers: [ { provide: NG_ASYNC_VALIDATORS, useExisting: AsyncPostalCodeValidatorDi ...

Unlocking the secrets of retrieving the URL query string in Angular2

I'm struggling to extract the URL query string returned by the security API, resulting in a URL format like this: www.mysite.com/profile#code=xxxx&id_token=xxx. My goal is to retrieve the values of code and id_token. In my ngOnInit() function, I ...

Bootstrap 4 navigation: The right side of the navigation bar

Currently working on designing a navbar in ng-bootstrap which involves Angular 4 and Bootstrap 4. The goal is to have some items aligned on the left as a pulldown menu, and other items on the right without any dropdown functionality. Progress has been made ...

The search functionality in Angular 2 using Typescript is not working properly, as the button is not triggering the

I've been working on developing a search feature that utilizes text input to look up information about corporations through a government API (https://github.com/usagov/Corporate-Consumer-Contact-API-Documentation). Within my project, I have an HTML p ...