Angular 4 formArrayName用于下拉列表

Question

我可以通过以下方式传递价值

模板：

<td formArrayName="itemnameS">
<div *ngFor="let itemname of itemnameS.controls; let i=index">
<input [formControlName]="i" placeholder="Item Name">
</div>

component.ts：

form = new FormGroup({
    itemnameS: new FormArray([
      new FormControl('Gloves'),
      new FormControl('Gauze'),
      new FormControl('Needles'),
    ]),
    quantitieS: new FormArray([
      new FormControl(''),
    ]),
  });

请告诉我下拉列表如何可能如下：

<select  formArrayName="itemnameS">
<option *ngFor="let itemname of itemnameS.controls; let i=index" >
                {{ ?? }}
</option>
</select>

看起来应该如下：

Answer 1

你不应该创建formArray：

form = new FormGroup({
    itemnameS: new FormArray([null]), // null to have at least one item initially
    quantitieS: new FormArray([
      new FormControl(''),
    ]),
  });

this.myItems = ['Gloves','Gauze','Needles'];

然后：

<div *ngFor="let control of form.get('itemnameS').controls ; let i = index" >
      <select  formControlName="control">
           <option *ngFor="let itemname of myItems; let i=index [value]='itemname' >
                {{ itemname }}
     </option>
</select>
  <button (click)="addNewOne()">Add</button>

        <button (click)="remove(i)">Remove</button>
</div>

别忘了，select只是一个用户输入而用户输入只能有一个控制器，因此必须为其分配一个formControl，因为它最终会被分配给它将一个值保存到您的数据库中。

然后如果你想实现add新项目功能：

 addANewOne(){
     this.form.get('itemnameS').push(new FormControl())

  }

并删除

 remove(index){
     this.form.get('itemnameS').removeAt(index)

  }