Question

我试图从我的json数据动态生成和使用表单控件。我想出一个简单的实验来弄清楚我需要应用的机制如下。

在类

中定义的变量

demoA: string         = 'name';
demoB: Array<string>  = ['city', 'state'];
demoC: FormGroup      = new FormGroup({});

从demoA和demoB抓取属性并转换为FomControl s

的功能

loadStuff(){
    let a = this.demoA;
    let b = this.demoB;
    let ab: Array<string> = [];

    ab.push(a);
    b.forEach( bb => {ab.push(bb)} );
    console.log(ab);

    ab.forEach( ctrl => this.demoC.addControl(ctrl, new FormControl('')) );

    console.log( this.demoC.value );
}

现在demoC的值是

demoC: {name:'', city:'', state:''}

由于我在组件加载时动态创建了这个，因此我没有预定义的方式来绑定它，这让我想知道我是否可以绑定到它里面对输入的绑定就像这样

<input type="text" [(ngModel)]="demoC.{{demoA}}" />

当然没有用，也没有

<input type="text" [(ngModel)]="demoC.[demoA]" />

<input type="text" [(ngModel)]="demoC.[(demoA)]" />

<input type="text" [(ngModel)]="demoC.(demoA)" />

<input type="text" [(ngModel)]="(demoC)+'.'+(demoA)" />

<input type="text" [(ngModel)]="[(demoC)+'.'+{{demoA}}]" />

<input type="text" [(ngModel)]="('demoC.'+{{demoA}})" />

<input type="text" [(ngModel)]="['demoC.'+{{demoA}}]" />

<input type="text" [(ngModel)]="['demoC.'+[demoA]]" />

<input type="text" [(ngModel)]="[('demoC.')+[demoA]]">

如果我希望结果为demoC.name我该怎么做呢？

Answer 1

为什么{{}}语法？您只需使用{strong>动态属性的[(ngModel)]=demoC[demoA]语法进行绑定即可。但是你在这里混合了两种方法Simple Form方法与Reactive Form方法。如果您想使用FormGroup我认为最好使用FormControlName指令而不是ngModel。或者，如果您想使用ngModel，我认为您不需要使用FormGroup。

如何在角度2中的1个属性绑定中绑定2个变量？

1 个答案: