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

前端之家收集整理的这篇文章主要介绍了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以了解有关它的详细信息.

猜你在找的JavaScript相关文章