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

The error occurs when trying to access the `pipe` property of an undefined variable in NgbTypeahead

I am currently working on implementing the typeahead directive of ng-bootstrap. Below is the code snippet from my HTML file: <input type="text" class="form-control" formControlName="payee" autofocus [ngbTypeahead]="searchPayee"> Here's the cor ...

Tips for accurately typing a "Type Mapping" function

In my code, I have a specific type designed for a function that takes one type I as input and returns another type O as output. Here is how it currently looks: export interface IFunctionalMapping<I, O, K extends keyof O> { [prop: Extract<O[K], ...

What is the process of including items in an Array?

I have been attempting to use the push method to add elements to an Array in Typescript, but strangely it doesn't seem to be working. The array just stays empty. Here's the code I have: list: Array<int> = Array(10) for(le ...

Dynamic font sizing in CSS allows text on a webpage to

I am working on creating a dynamic screen using AngularJS. Within this screen, there are objects with a specific size: .item { margin: auto; margin-bottom: 10px; width: 11vw; height: 11vw; text-overflow: ellipsis; overflow: hidden; } These i ...

Setting checkbox values using patchValue in Angular programming

I'm facing an issue with reusing my create-form to edit the form values. The checkbox works fine when creating a form, but when I try to edit the form, the values don't get updated on the checkbox. Below is the code snippet that I have been worki ...

How can data be transferred between controllers in Angular 2 without using URL parameters or the $state.go() function?

I've encountered an issue where I need to pass a parameter from one controller to another without it being visible in the URL. I attempted to do so with the following code: this.router.navigate(['/collections/'+this.name], {id: this.id}); ...

Issue: The provider specified for the NgModule 'AppModule' is invalid - it should only be instances of Provider and Type, but instead received: [?[object Object]?, ...]. This error occurred within Ionic framework

While working on my IONIC project, I encountered an error when adding Geolocation to my providers. Removing it from the providers allows my app to function properly, but even my professor couldn't solve the issue. Here is the content of my file: impor ...

Error TS2304: Unable to locate identifier 'QRScanner'

I am currently exploring https://www.npmjs.com/package/cordova-plugin-qrscanner in order to implement a QR scanning feature in my mobile application. As part of the initial steps, I have written the following code snippet in my typescript file: function o ...

Ionic collection-repeat feature causing changes in active classes

Within the ion-list in my code, I utilize ng-class. When a user clicks on an item, it dynamically adds the class selected. However, a challenge arises when using collection-repeat, as it manages the DOM and causes the selected class to change while scrolli ...

Displaying ngFor results through filtering with pipes in Angular 2

I have a situation where I am working with multiple nested *ngFor loops and using pipes to manipulate the data. My goal is to extract all the inner items from these nested loops in order to perform an action on each of them. Here is an example code snippe ...

md-table Using FirebaseListObservable as a DataSource

I am currently working with a FirebaseListObservable and a BehaviorSubject that is listening for an input filter. The goal now is to merge these two entities in order to return an array that has been filtered based on the input value, which will then be us ...

Ways to determine the number of duplicate items in an Array

I have an array of objects that contain part numbers, brand names, and supplier names. I need to find a concise and efficient way to determine the count of duplicate objects in the array. [ { partNum: 'ACDC1007', brandName: 'Electric&apo ...

The functionality of Ionic State.go seems to be malfunctioning

MY UNIQUE LOGIN CONTROLLER app.controller('authCtrl', function ($scope, $state) { $scope.login = function () { $state.go('home'); } }); EXPLORING MY App.js $stateProvider.state('loginPage', { url: &apo ...

The dimensions of my Angular app have begun to unexpectedly expand

Currently in the process of developing an Angular application, I've encountered a frustrating issue. Each time I refresh the app using ng serve, the loading time seems to increase gradually. It can now take up to 10 seconds for changes to reflect in t ...

Vue cannot detect the component that is provided by my plugin

This unique plugin, currently only includes a single component (coded in TypeScript): import _Vue, { PluginObject } from "Vue"; import MyComponent from "./MyComponent.vue"; const VuePlugin: PluginObject<void> = { install(Vue: typeof _Vue): void { ...

Incorporate a background image into mat-dialog

I've been struggling to set a background image on my mat-dialog, but for some reason it's not showing up at all. I attempted using a panelClass as well, but still no luck. .custom-panel .mat-dialog-container { background-image: url("../. ...

Exploring elements in firebase

I am currently in the process of expanding an application to utilize firebase as the backend in order to learn more about firebase/angularjs. My setup resembles this . Within my code, I have linked firebaseio.com/projects to $scope.projects. How can I ...

Learn how to send or submit data using the Form.io form builder

I am currently working on a dynamic drag and drop form builder, and I'm struggling to figure out how to log the data from the form. Below is the component.html file where I am implementing the drag and drop form: <div> <form-builder ...

Breaking up React code within the React.createElement() function

I am encountering an issue with lazily loaded pages or components that need to be rendered after the main page loads. When using createElement(), I receive the following error: LazyExoticComponent | LazyExoticComponent is not assignable to parameter of ty ...

What's the best way to implement an NPM package in a Deno application?

I am curious about integrating the NPM package into my Deno application. Can anyone guide me on how to achieve this? ...