在打字稿文件中获取表单数据，如数组答案

【问题标题】：Getting form data like array in typescript file在打字稿文件中获取表单数据，如数组
【发布时间】：2021-10-22 15:56:45
【问题描述】：

我有一个表单，想将表单输入作为 ionic 中的数组传递到打字稿文件中。

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>

我想在 typescript 文件 (question.page.ts) 中显示结果，如下所示：

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

我知道如何为具有不重复字段的表单执行此操作，但我不知道如何为多次重复相同输入的表单执行此操作。

提前致谢。

【问题讨论】：

您可以使用反应式表单。
@NajamUsSaqib 没有。它是简单的角形。
您可以将 ngModel 与 product.id 和 product.question 绑定。或者使用反应形式
@AmmarHussain 谢谢。但我无法绑定，因为我不熟悉离子和角度。
响应式表单是 Angular 应用程序的表单。它们用于制作具有复杂数据或重复键的动态表单。在谷歌上搜索。

标签： angular typescript ionic-framework

【解决方案1】：

这是绑定模型的方法。

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

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

<h2>Contact Back</h2>
<ion-select [(ngModel)]="product.contactBack" 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)="sendQuestion()">Send Question</ion-button>

【讨论】：

谢谢。它会与 ngFor="let product of products;" 一起使用吗，因为那时有 12 个产品，它们将加载，每个产品都会有 *question 和 contact back 字段。
我把你的答案粘贴到了html文件中，我应该在ts文件中写些什么。
您不需要在 .ts 文件中写入任何内容。它将直接更新您的 products 数组。
@NajamUsSaqib 当我执行 console.log(products) 然后它显示从数据库调用的产品列表并且不显示我添加到形式。
它会更新你以前的值。