如何在 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

如何在 Angular 2 中创建数组文本框以及如何将数组文本框值发送到组件

How do I create array text boxes in Angular 2 and How to send array text boxes values to component

angular2-forms

angular