Retrieving array-like form data in a TypeScript file

I need assistance with passing form inputs into a typescript file as an array in an ionic application.

The form is located in question.page.html

<details *ngFor="let product of products;">

    <ion-input type="text" [(ngModel)]="productId" value="{{product.id}}"></ion-input>

    <h2>Question</h2>
    <ion-input type="text" [(ngModel)]="question"></ion-input>

    <h2>Contact Back</h2>
    <ion-select [(ngModel)]="contactBack" interface="popover">
       <ion-select-option value="0">No</ion-select-option>
       <ion-select-option value="1">Yes</ion-select-option>
    </ion-select>

</details>

<ion-button type="button" (click)="sendQuestion()">Send Question</ion-button>

I am looking to display the result in a typescript file (question.page.ts) similar to the structure below:

"productQuestions": [
    {
        //First
        'productId': 'value',
        'question': 'value',
        'contactBack': 'value',
    },
    {
        //Second
        'productId': 'value',
        'question': 'value',
        'contactBack': 'value',
    },
    ...
],

I am familiar with handling forms that have unique fields, but I am uncertain about how to approach forms with repeated inputs. Any guidance would be greatly appreciated.

Thank you in advance.

Answer №1

Here is a simple method to connect the model.

<ion-input type="text" [(ngModel)]="device.deviceId" value="{{device.id}}"></ion-input>

<h2>Inquiry</h2>
<ion-input type="text" [(ngModel)]="device.inquiry"></ion-input>

<h2>Follow Up</h2>
<ion-select [(ngModel)]="device.followUp" interface="popover">
   <ion-select-option value="0">No</ion-select-option>
   <ion-select-option value="1">Yes</ion-select-option>
</ion-select>
<ion-button type="button" (click)="submitInquiry()">Submit Inquiry</ion-button>

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

Can I format fixed text alongside a label in an angular material form to match the styling of an input, ensuring they have consistent typography?

I am currently creating a form using Angular material. I want to add static text and a styled label that mimics a form input without interactivity or underlining. By using a custom class, I managed to achieve this effect: <mat-form-field floatLa ...

How can we detect if the pressing of an "Enter" key was triggered by an Angular Material autocomplete feature?

Currently, I have incorporated an Angular Material Autocomplete feature into my search bar. When a user types in their query and presses the Enter key, the search is executed as expected. Nevertheless, if the user decides to select one of the autocomplete ...

Ways to receive one of two variations

Dealing with different cases for type is my current challenge. In a React Functional Component, I have a callback function property that accepts an argument of either string or number. interface InputProps { getValue?: (value: string | number) => vo ...

Encountering problems with createMediaElementSource in TypeScript/React when using the Web Audio API

Currently, I am following a Web Audio API tutorial from MDN, but with a twist - I am using TypeScript and React instead of vanilla JavaScript. In my React project created with create-react-app, I am utilizing the useRef hook to reference the audio element ...

How do I assign a default value to an optional parameter in a derived class in Typescript?

One of my classes is called ClientBase: export class ClientBase { constructor(private uri: string, private httpClient: HttpClient) { } // Contains Various Methods } I have multiple subclasses that are derived from the ClientBase For instance: @I ...

Leveraging TypeScript enums in conjunction with React to anticipate a string prop

Trying to enforce strict typing for a Button component in React. How can I ensure a prop has a specific string value? The current effort yields Type '"primary"' is not assignable to type 'ButtonLevel' enum ButtonLevel { Primary = ...

The Shell Application is not refreshing React HtmlElement Micro Front end

I am currently facing an issue when trying to inject the following React MFE into another Angular shell application. The MFE loads successfully the first time, but if it is hidden or removed from the DOM and then reloaded, it fails to load. Could you plea ...

Looking to display cities based on the country chosen in Angular?

Hi everyone! I need help with creating a cascade type dropdown for displaying cities based on the selected country. I have a list of about 3,000 cities, but I only want to show the cities from the chosen country. Here is the structure of the country: " ...

Can you explain the concept of injection context within Angular version 16 and later?

I have come across the term "Injection context" and am trying to understand what it entails. In Angular, there are several things that are connected to injection context: EnvironmentInjector#runInContext injectionContext runInInjectionContext inject() Fr ...

Mastering Angular Service Calls in TypeScript: A Comprehensive Guide

In the midst of my TypeScript angular project, I am aiming to revamp it by incorporating services. However, I have encountered an issue where when calling a function within the service, the runtime does not recognize it as the service class but rather the ...

Leveraging components from external modules within sub-modules

So, I've created a module to export a component for use in different modules. However, I'm facing an issue with how to properly utilize this component within child modules of another parent module. While I have imported the first module into the ...

Expand by focusing solely on recognized attributes?

I am working on creating an interface that can accept a mapped type, allowing for both runtime logic and compile-time typing to be utilized. Here is an example of what I'm aiming for: type SomeType = { a: string b: { a: string, b: string } } magi ...

The element of type 'any[]' cannot be assigned to type '[id: string]'

My goal is to develop a versatile API structure, where the properties are functions that return Promises. export type API = { [key: string]: <Params extends any[], Response>(...params: Params) => Promise<Response>, } export interface User ...

incomplete constructor for a generic class

I have multiple classes that I would like to initialize using the following syntax: class A { b: number = 1 constructor(initializer?: Partial<A>) { Object.assign(this, initializer) } } new A({b: 2}) It seems to me that this ini ...

Steps for eliminating a selection in the dropdown list:

I am dealing with a situation in which my select element gets new options added based on a specific input value. However, each time the value is changed, more options are appended to the select element instead of replacing the old ones. How can I remove th ...

Issue with rest operator behavior in TypeScript when targeting es2018

This specific code snippet functions properly in the TypeScript Playground... class Foo { constructor(...args: any[]) { } static make(...args: any[]): Foo { return new Foo(...args); } } Example However, when trying to incorpora ...

Check out the attributes of a class

I have a TypeScript class that is defined like this: export class MyModel { ID: number; TYPE_ID: number; RECOMMENDED_HOURS: number; UNASSIGNED_HOURS: number; } In a different .ts file, I instantiate this class within a component: export class My ...

The data type 'Event' cannot be assigned to the data type 'string' in this context

Recently diving into Angular, I came across a stumbling block while working through the hero tutorial. The error message that popped up was: Type 'Event' is not assignable to type 'string' You can see the error replicated here. ...

Angular/TypeScript restricts object literals to declaring properties that are known and defined

I received an error message: Type '{ quantity: number; }' is not assignable to type 'Partial<EditOrderConfirmModalComponent>'. Object literal may only specify known properties, and 'quantity' does not exist in type &ap ...

Can SystemJS, JetBrains IntelliJ, and modules be combined effectively?

Looking for some clarification on the functionality of module includes and systemJS within an Angular2 app structure. I have set up a basic Angular2 app with the following layout: -app |-lib (contains shims and node libraries) |-components |-app |-app. ...