如何在Angular 2中創建數組文本框以及如何將數組文本框值發送到組件

Question

我正在使用反應形式，並希望創建一些數組字段，例如

<input type="text" formControlName="prices[]" id="" class="form-control price-packages">

或者您可以看到這里是我的表格，例如：

<form [formGroup]="createPackageForm" (ngSubmit)="createPackage(createPackageForm.value)">
    <input type="text"
           formControlName="prices[]"
           class="form-control price-packages"/>
    <input
            type="text" formControlName="prices[]" class="form-control price-packages">
    <input type="text"
           formControlName="prices[]"
           class="form-control price-packages"/>
    <input
            type="text" formControlName="prices[]" class="form-control price-packages"/>

    <input type="submit"
           class="button btn btn-success"
           value="Submit"/>
</form>

請幫幫我。

Answer 1

您使用FormArray而不是FormControl。
在您的html更改中：

<form [formGroup]="createPackageForm" (ngSubmit)="createPackage(createPackageForm.value)">

   <div formArrayName="prices">
       <div *ngFor="let price of createPackageForm.get('prices').controls; let r=index;">
           <div [formGroupName]="r">
                <td><input type="text" formControlName="price-package"></td>
           </div>
       </div>
   </div>
</form>

並且在您的ts中，您需要將FormArray添加到createPackageForm中。

this.createPackageForm.addControl('prices', new FormArray());

查看本文以獲取更多詳細信息：

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2