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中，你需要在你的createPackageForm中添加一个FormArray。

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

查看此文章了解更多详情：

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

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

1 个答案: