javascript - Angular react 形式: Dynamic Select dropdown value not binding

我有两个数据数组:AssociatedPrincipals(以前保存的数据)和 ReferencePrincipals(在下拉控件中填充的静态数据)。我正在努力从 AssociatedPrincipals 获取之前的值，以便在页面加载时以动态数量(大多数示例使用单个下拉列表)显示/选择下拉列表。

我不确定如何设置表单(代码隐藏和 HTML)，尤其是设置 Select 的 formControlName。目前，每个下拉列表中的静态值都会填充，但我无法正确绑定(bind)所选值。

public ngOnInit() {
    this.factsForm = this.formbuilder.group({
        associatedPrincipals: this.formbuilder.array([]),
        referencePrincipals: this.formbuilder.array([])
    });

    // Data for both of these methods comes from external source...
    var responseData = // HTTP source...
    // Push retrieved data into form
    this.initPrincipals(responseData[0]);
    // Push static data into form
   this.initStaticData(responseData[1]);
}

public initPrincipals(principals?: IAssociatedPrincipal[]): FormArray {
    principals.forEach((principal) => {
 this.associatedPrincipals.push(this.createPrincipalFormGroup(principal));
    });
}

public initStaticData(response: IReferencePrincipal[]) {
   response.forEach((principal) => {
      this.referencePrincipals.push(
           this.formbuilder.control({
                code: principal.code,
                canHaveLead: principal.canHaveLead,
                isDuplicate: false
              }));
        });
}

public createPrincipalFormGroup(principal: IAssociatedPrincipal) {
        return this.formbuilder.group({
            code: principal.code,
            canHaveLead: false,
            isDuplicate: false
        });
    }

public get associatedPrincipals(): FormArray {
        return this.factsForm.get('associatedPrincipals') as FormArray;
    }

    public get referencePrincipals(): FormArray {
        return this.factsForm.get("referencePrincipals") as FormArray;
    }

HTML:

 <form novalidate [formGroup]="factsForm">
        <div formArrayName="associatedPrincipals">
             <div *ngFor="let associatedPrincipal of associatedPrincipals.controls; let i=index;" [formGroupName]="i" >
                <select class="form-control create-input"
                        formControlName="i">
                     <option value=null disabled selected hidden>--Select--</option>
                       <option *ngFor="let refPrincipal of referencePrincipals.controls" [ngValue]="refPrincipal">refPrincipal.value.code</option>
                 </select>
             </div>
         </div>
    </form>

我感谢任何反馈!

编辑:添加了显示问题的 Plunker: https://embed.plnkr.co/XMLvFUbuc32EStLylDGO/

最佳答案

演示中的问题

根据您提供的demo，存在以下几个问题:

没有分配给 formControlName 的 select 。

您正在将 对象 绑定(bind)到选择的选项。

对于第一个问题

由于您正在循环 associatedPrincipals 以动态显示下拉列表。 associatedPrincipals 是一个 formArray，可以考虑如下:

associatedPrincipals = {
  "0": FormControl,
  "1": FormControl
}

因此，您可以简单地将在 i 表达式中定义的 *ngFor 分配给 formControlName 。

<select formControlName="{{i}}" style="margin-top: 10px">
   ...
</select>

对于第二个问题

在将 对象 绑定(bind)到 option 时，Angular 默认会通过 对象实例 比较默认值和 option 的值。

您可以将相同的实例(从 referencePrincipals 的 formControls 的值中获取)设置为 associatedPrincipals 的 formControl(如@Fetra R. 的回答)。但这不是最方便的方法，因为您必须采取一些逻辑来保持对象的相同实例。

在这里，我将为您提供另一种解决方案，该解决方案使用专为您当前情况设计的 compareWith 指令，请参阅 docs 。

使用 compareWith 指令，您只需要实现一个 compareFun 来告诉 angular 如何将两个对象(具有不同实例)视为相同。这里可以同时包含 comparing object instance 和 comparing object fields。

<select formControlName="{{i}}" style="margin-top: 10px" [compareWith]="compareFun">
  <option value=null disabled selected hidden>--Select--</option>
  <option *ngFor="let refPrincipal of referencePrincipals.controls"
     [ngValue]="refPrincipal.value">{{ refPrincipal.value.code }}</option>
</select>

// tell angular how to compare two objects
compareFn(item1, item2): boolean {
  return item1 && item2 ? item1.code === item2.code : item1 === item2;
}

请参阅 docs 和修复 demo 以了解有关它的详细信息。