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-completer中有一个修复程序，现在它按预期工作。

应该像下面一样：

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>

以下是plunker

具有嵌套下拉列表的ng2-completer

1 个答案: