Отправка динамически сгенерированного контента как части формы

В настоящее время я пытаюсь отправить динамически сгенерированный контент из таблицы в моей форме. Я использую Angular 6 для создания формы, но я не могу понять, как представить динамическое содержимое формы в объявлении FormGroup.

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  accountDetails = [{
    id: 1,
    name: 'Account 1',
    amountHeld: 5453.7,
    amountToTransfer: 0

  },
  {
    id: 2,
    name: 'Account 2',
    amountHeld: 5644.7,
    amountToTransfer: 0

  },
  {
    id: 3,
    name: 'Account 3',
    amountHeld: 42465.7,
    amountToTransfer: 0

  }
  ,{
    id: 4,
    name: 'Account 4',
    amountHeld: 1434.7,
    amountToTransfer: 0

  }
  ]

  transferDetailsForm = new FormGroup({
    transferType: new FormControl("", [Validators.required]),
  });


}


<form name="transferDetailsForm" [formGroup]="transferDetailsForm">
    <div class="row">
        <div class="form-group">

            <label class="required">Choose category of transfer </label>&nbsp;

              <div id="rbTradeCategorySelect" class="form-group" style="padding-left: 20px;">

                <label for="rbMove" class="radio-inline">
                  <input type="radio" value="SaleOrGift" (change)="changeTransferCategory($event)" formControlName="transferType" click-capture />
                  Sale or gift
                </label>&nbsp;

                <label for="rbLease" class="radio-inline">
                  <input type="radio" radio value="Lease" (change)="changeTransferCategory($event)" formControlName="transferType" click-capture />
                  Lease
                </label>&nbsp;
              </div>
            </div>
          </div>
          <table>
            <thead>
              <th>Account Name </th>
              <th>Account Balance</th>
              <th>Amount to Transfer</th>
            </thead>
            <tbody>
              <tr *ngFor='let a of accountDetails'>
                <td>{{a.name}}</td>
                <td>{{a.amountHeld}}</td>
                <td>
                  <input type="hidden" placeholder="{{a.id}}"/>
                  <input type="text" placeholder="{{a.amountToTransfer}}"/>
                </td>
              </tr>
            </tbody>
          </table>
   <button id="btnSubmit" class="btn btn-success btn-lg" (ngSubmit)="transferDetailsForm.valid"
                    click-capture>
                    Submit
                  </button>      
</form>

Я создал следующий макет моей формы в надежде, что кто-то может мне помочь.

https://stackblitz.com/edit/angular-yzumze


angular angular-forms angular-formbuilder
person Mick Walker    schedule 29.10.2018    source источник
comment
Поправьте меня, если я ошибаюсь, так что, по сути, вы хотите, чтобы значения accountDetails были установлены как начальные значения transferDetailsForm ?   -  person jmdavalos    schedule 29.10.2018
comment
Не совсем, я хочу знать, как я включаю информацию об учетной записи (динамически) как часть группы форм, что позволит мне читать любые значения, отправленные пользователем при отправке, на данный момент это не является частью моей декларации FormGroup().   -  person Mick Walker    schedule 29.10.2018
comment
Ах, вы можете использовать FormArray, особенно если ваш массив accountDetails увеличивается или уменьшается в размере - см. ответ ниже   -  person jmdavalos    schedule 29.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

Как я уже упоминал в комментариях, для этого вам нужно использовать FormArray. Для более подробного обсуждения того, когда использовать FormArray против FormGroup, ознакомьтесь с: Когда использовать FormGroup против FormArray?

Теперь проверьте:

app.component.ts

...
...
...
transferDetailsForm: FormGroup;
results: Array<string>;

constructor(
  private formBuilder: FormBuilder,
) { }

ngOnInit() {
  this.transferDetailsForm = this.formBuilder.group({
    amountToTransferArray: this.buildFormArray(),
  });
}

buildFormArray(): FormArray {
  let arr = [];
  this.accountDetails.forEach(details => {
    arr.push([details.amountToTransfer, [Validators.required]]);
  });

  return this.formBuilder.array(arr);
}

get amountToTransferArray(): FormArray {
  return this.transferDetailsForm.get('amountToTransferArray') as FormArray;
}

onSubmit() {
  const formModel = this.transferDetailsForm.value;
  this.results = formModel;
}

app.component.html

<table>
  <thead>
    <th>Account Name </th>
    <th>Account Balance</th>
    <th>Amount to Transfer</th>
  </thead>
  <tbody>
    <tr *ngFor="let a of accountDetails; let index = index">
      <td>{{ a.name }}</td>
      <td>{{ a.amountHeld }}</td>
      <td>
        <input type="hidden" placeholder="{{ a.id }}"/>
        <input type="number" [formControl]="amountToTransferArray.controls[index]"/>
      </td>
    </tr>
  </tbody>
</table>
<button id="btnSubmit" class="btn btn-success btn-lg"
  (click)="onSubmit()">
  Submit
</button>

Я разветвил ваш stackblitz и изменил его здесь: https://stackblitz.com/edit/angular-ib3kth

person jmdavalos    schedule 29.10.2018