Tips for storing information without using ngModel in template-driven methodology

Currently facing a dilemma where data needs to be saved to the database from Angular UI. The display format of tabular data changes dynamically based on dropdown selections, without having predefined model properties for binding.

The question arises: How can data be saved to the database without a defined model class with properties for binding? Creating over 100+ properties seems excessive, especially when the number of values displayed in the UI is unknown.

For instance, if the dropdown has options A, B, C, D, each resulting in different numbers of rows being returned (15, 30, 50...), how can this data be efficiently saved?

The code snippet below showcases how the data is fetched and displayed in a tabular format:

.ts

// JavaScript code here

.html

<table class="tableInfo">
    // HTML table structure here
</table>

Data display is successful, but the challenge remains on how to save the data without a model. With potentially multiple rows that can be edited, the existing dirty property might not suffice. Is there an alternative solution for saving the data or is creating a model class with ngmodel the only way forward?

Answer №1

If you're feeling adventurous, instead of taking the easy route with ReactiveForms or a simple array of row models, you can choose to tackle it the hard way...

Why not wrap everything in a <form> and stick to good old HTML form submissions?

<form action="some/backend/path" method="POST">
   Place your table with inputs here - just ensure each has a unique `name` attribute as you are duplicating them now

<button type="submit">GO FOR IT</button>
</form>

If you need to manipulate the form/data before submission, you can always utilize the onsubmit event.

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

Troubleshooting issue: Ineffective transfer of parameters among Angular components

Currently, I am working on an Angular project that consists of two components: property-value and purchase-expenses. Both components are being used within the app.component.html file. My goal is to ensure that if a parameter changes in the property-value c ...

What properties are missing from Three.js Object3D - isMesh, Material, and Geometry?

Currently, I am working with three.js version r97 and Angular 7. While I can successfully run and serve the application locally, I encounter type errors when attempting to build for production. Error TS2339: Property 'isMesh' does not exist on ...

Place a new button at the bottom of the react-bootstrap-typeahead dropdown menu for additional functionality

Currently, I have successfully implemented the React Bootstrap Typeahead with the desired options which is a good start. Now, my next challenge is to integrate a custom button at the end of the dropdown list for performing a specific action that is not ne ...

When utilizing the Angular library in an Ionic project, make sure to call the inject() function within an injection context

I have been working on a project that involves an angular workspace containing an angular web app and an angular ionic app. In an effort to reuse my existing authentication service, which utilizes AngularFireauth and AngularFirestore, I extracted the servi ...

Utilizing the Teams web app within my customized electron application

I've been developing an electron app and am trying to integrate the MS Teams web app into it. I've successfully displayed MS Word, MS Powerpoint, and other apps using window.loadURL(''), but I'm experiencing issues with MS Teams. D ...

Issues arise when attempting to read data from a JSON file upon refreshing the Angular page

Currently, I am working on an Angular application where the client has requested to have the path of the backend stored in a JSON file. This will allow them to easily modify the path without requiring another deployment. I have implemented this feature su ...

The type 'Observable' does not contain the properties found in type 'User'

I am trying to retrieve user data from Firestore, but encountering an error The type 'Observable' is missing the following properties from type 'User': email, emailVerified, uidts(2739) user.service.ts import { Injectable } from &apo ...

An issue has occurred: TransformError SyntaxError: Unexpected keyword 'const' was encountered

While practicing programming with React-Native, I encountered a problem that I couldn't figure out how to solve. I attempted to use solutions from various forums, but none of them worked. import { StyleSheet, Text, View, Image } from 'react-nativ ...

How come ngOnChange is unable to detect changes in @Input elements when ngOnDetect is able to do so?

Check out this plunker Please note: In order to see the effect, you need to restart the app after entering the link. import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core' @Component({ selector: 'sub', templat ...

The Ionic tab is already finished displaying even before the data has completed loading

Creating a favorites section for a vouchers app has proven to be slightly challenging. When attempting to retrieve the current user's favorite vouchers and display them using ngFor in the HTML, I encountered an issue. The very first time I open the fa ...

After using apt to install tsc, I find myself in a dilemma on how to either delete or upgrade it

After realizing I was missing Typescript on my server, I attempted to run the 'tsc' command. However, I received a message suggesting I use 'apt install tsc' instead. Without much thought, I executed the command. Normally, I would insta ...

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

Understanding the significance of the term "this" in Typescript when employed as a function parameter

I came across a piece of TypeScript code where the keyword "this" is used as a parameter of a function. I'm curious to know the significance of this usage and why it is implemented like this in the following context: "brushended(this: SVGGElement) {". ...

What is the definition of a type that has the potential to encompass any subtree within an object through recursive processes?

Consider the data structure below: const data = { animilia: { chordata: { mammalia: { carnivora: { canidae: { canis: 'lupus', vulpes: 'vulpe' } } } } }, ...

Best practices for managing data loading with composition API and onBeforeRouteUpdate

I have a Vue 3 single-page component that contains the following script: export default defineComponent({ props: { id: String, }, setup(props) { const error = ref<boolean>(false) const thisCategory = ref<CategoryDetails>() ...

Converting an HTMLElement to a Node in Typescript

Is there a method to transform an HTMLElement into a Node element? As indicated in this response (), an Element is one specific type of node... However, I am unable to locate a process for conversion. I specifically require a Node element in order to inp ...

Searching for data based on specific keywords in Angular 2, rather than using a wildcard search, can be done by utilizing the key-in

My dropdown contains 100 values, and I am currently able to search for these values based on key input using wild search. However, I would like the dropdown to display values based on the specific alphabet that I enter first. HTML: <div class="col- ...

Populate a map<object, string> with values from an Angular 6 form

I'm currently setting keys and values into a map from a form, checking for validation if the field is not null for each one. I am seeking a more efficient solution to streamline my code as I have over 10 fields to handle... Below is an excerpt of my ...

When loading a value from a promise in a service to populate a formgroup, the placeholder in the md-input does not

Currently in my Angular2 project, I am experimenting with a new approach to loading data into my input fields. By utilizing formgroup, I can maintain cleaner HTML and incorporate more validation logic in the component's TypeScript file. The code snipp ...

Show the Search Results from Angular 2 in a Separate Component

When I search, the names are displayed on a suggestion list without any issues because they are not in a separate component. Search HTML <input type="text" placeholder="Search" (keyup)="getSuggestion($event.target.value)"> <div class="suggest ...