NG2-嵌套下拉式完成器

Question

我的反应方式如下：

component.ts：

public colors = ["aliceblue","antiquewhite","aqua","aquamarine","azure","beige",
"bisque","black","blanchedalmond"];


      form = new FormGroup({
          ItemNames: new FormArray([
            new FormControl([null]),
          ])
        });


    onSubmit() {
      console.log(this.ItemNames.value);
      console.log(this.form.value);  
    }

component.html：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="card">
    <div class="card-block">
        <div class="form-group row"  formArrayName="ItemNames">
            <div class="col-3 pr-0 border-right-0 with-chevron">
                <ng2-completer *ngFor="let ItemName of ItemNames.controls; let i=index"
                              #openCloseExample
                               class="completer-limit"                       
                               [datasource]="dataService4"
                               [inputClass]="'form-control'"
                               [openOnFocus]="true"
                               (opened)="onOpened($event)"
                               (focus)="openCloseFocused = true"
                               (blur)="openCloseFocused = false"
                               [minSearchLength]="0"
                               [placeholder]="'search color'"
                               [autoHighlight]="true"
                               [fillHighlighted]="false">
                </ng2-completer>
            </div>

如何在这里提供表单控制名称，如ng2-completetr中的formControlName="i"。我试过不同的方法，但直到现在都没有运气。你能帮我解决这个问题吗？

Answer 1

所以在NG2中有一个修正，现在它正像预期的那样工作。

它应该是这样的：

public colors = ["aliceblue","antiquewhite","aqua","aquamarine","azure","beige",
"bisque","black","blanchedalmond"];


      form = new FormGroup({
          ItemNames: new FormArray([
            new FormControl(null),
          ])
        });


    onSubmit() {
      console.log(this.ItemNames.value);
      console.log(this.form.value);  
    }

和

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="card">
    <div class="card-block">
        <div class="form-group row"  formArrayName="ItemNames">
            <div class="col-3 pr-0 border-right-0 with-chevron">
                <ng2-completer *ngFor="let ItemName of ItemNames.controls; let i=index"
                              #openCloseExample
                               formControlName="i"
                               class="completer-limit"                       
                               [datasource]="dataService4"
                               [inputClass]="'form-control'"
                               [openOnFocus]="true"
                               (opened)="onOpened($event)"
                               (focus)="openCloseFocused = true"
                               (blur)="openCloseFocused = false"
                               [minSearchLength]="0"
                               [placeholder]="'search color'"
                               [autoHighlight]="true"
                               [fillHighlighted]="false">
                </ng2-completer>
            </div>

这是柱塞