javascript – Angular Reactive Forms：动态选择下拉值不绑定

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

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

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：


我感谢任何反馈！
编辑：添加了Plunker显示问题：https://embed.plnkr.co/XMLvFUbuc32EStLylDGO/


最佳答案
演示中的问题
根据您提供的演示,有以下几个问题：
>没有分配formControlName来进行选择.
>您是绑定对象以选择选项.
对于第一个问题
由于您循环通过associatedPrincipals动态显示下拉列表.和associatedPrincipals是一个formArray,可以考虑如下：

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

因此,您可以简单地将在* ngFor expression中定义的i分配给formControlName.


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

 原文链接：https://www.f2er.com/js/429656.html

javascript – Angular Reactive Forms：动态选择下拉值不绑定

猜你在找的JavaScript相关文章