Как отправить несколько динамических форм с одинаковым именем поля ввода в угловых?

Question

Я новичок с угловой ионной. Я хочу отправить одну форму за один раз с проверкой. На странице их многократная форма с одинаковым именем поля ввода.

Я пытался с Jquery, он может работать у меня есть опыт работы с JQuery. Но в угловом 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>````

Answer 1

Вы должны взглянуть на FormBuilder, который является частью Angular.

Это стандартное решение для подобных сценариев.

Концепция высокого уровня заключается в том, что вместо построения структуры форм наНа странице вы создаете модель формы, используя API FormBuilder.

Затем вы можете получить данные по всему коду и решить, что вы хотите отправить в каждом случае.

ЧтоВы строите в данный момент шаблонную форму.Эта альтернатива известна как реактивная форма.

Отличной отправной точкой для этого является Alligator.io:

• https://alligator.io/angular/reactive-forms-introduction/

Примечание.Мне потребовалось несколько раз, чтобы разобраться в этом, но как только я понял, это стало мощным способом обработки сложных данных формы в Angular / Ionic, поэтому я рекомендую придерживаться этого, даже если вы немного запутались, чтобы начатьпрочь с.