时间戳

首页 > 解决方案 > 如何以角度提交具有相同输入字段名称的多个动态表单？

angular7 - 如何以角度提交具有相同输入字段名称的多个动态表单？

问题描述

我是角度离子的新手。我想一次提交一份表格并进行验证。在页面上，它们是具有相同输入字段名称的多个表单。

我已经尝试过使用 Jquery，它可能是我使用 JQuery 的经验。但是在 Angular 7 中，我刚刚开始。

    <ion-card *ngFor="let result of searchData.data">
      <ion-row>
        <ion-col>
          <form (ngSubmit)="updateStock(result.id)" >
            <ion-item lines="none">
              <ion-thumbnail>
                <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
              </ion-thumbnail>
              <ion-item lines="none">
                <p>{{result.title}}</p>
              </ion-item>
            </ion-item>

            <ion-row>
              <ion-col size="6" size-sm>
                <ion-item>
                  <ion-label position="floating">Add Quantity</ion-label>
                  <ion-input type="number" name="quantity" maxlength="5" [(ngModel)]="stock.quantity"></ion-input>
                </ion-item>
                <div class="ion-text-end">Available: {{result.quantity}}</div>
              </ion-col>
              <ion-col size="6" size-sm> 
                <ion-item>
                  <ion-label position="floating">Product Condition</ion-label>
                  <ion-select placeholder="Select One" name="product_status_id" [(ngModel)]="stock.product_status_id">
                    <ion-select-option value="1">New</ion-select-option>
                    <ion-select-option value="2">Old</ion-select-option>
                    <ion-select-option value="3">Return</ion-select-option>
                    <ion-select-option value="4">Other</ion-select-option>
                  </ion-select>
                </ion-item>
              </ion-col>
            </ion-row>
            <p>If Return then ask from witch platform it comes</p>
            <ion-list>
              <ion-item>
                <ion-label  position="floating">Return from</ion-label>
                <ion-select placeholder="Select One" name="marketplace_id" [(ngModel)]="stock.marketplace_id">
                  <ion-select-option value="1">Amazon</ion-select-option>
                  <ion-select-option value="2">Paytm</ion-select-option>
                  <ion-select-option value="3">Flipkart</ion-select-option>
                  <ion-select-option value="4">Shop</ion-select-option>
                  <ion-select-option value="5">Other</ion-select-option>
                </ion-select>
              </ion-item>
            </ion-list>
            <ion-button color="success" type="submit" block>Update</ion-button>
            <ion-button color="danger" type="button" block>Edit</ion-button>
          </form>
        </ion-col>
      </ion-row>
    </ion-card>
  </div>
  <ng-template #noData>
    <div class="ion-text-center">
      {{noDataFound}}
    </div>
  </ng-template>````

标签： angular7ionic4

解决方案

您应该查看作为 Angular 一部分的 FormBuilder。

这是此类场景的标准解决方案。

高级概念是，您无需在页面上构建表单结构，而是使用 FormBuilder api 构建表单模型。

然后，您可以通过代码获取所有数据并决定在每种情况下要提交的内容。

您目前正在构建的是模板驱动的表单。这种替代方式被称为反应形式。

Alligator.io 是一个很好的起点：

旁注：我花了一些时间来解决这个问题，但是一旦我弄清楚它已经成为在 Angular / Ionic 中处理复杂表单数据的强大方法，所以我建议你坚持使用它，即使你有点困惑开始。

推荐阅读