Angular 2+ ngModel仅使用对象括号表示法

时间:2017-06-01 19:47:13

标签: javascript angular

我所获得的是动态生成的ngModel对象,并且不在顶层生存的某些属性仅在一个方向上绑定。

包括一个应该让事情更清晰的plunkr,但我想要做的是生成动态表单,如果属性嵌套在根目录下的某个级别,则使用对象括号表示法。我唯一想到的可能是将三元运算符放在ngModel中是不好的形式,但是我只是试图从ngModel中调用一个函数而遇到错误。

Plunkr:https://plnkr.co/edit/UPrem6

@Component({
    selector: 'sample-app',
     template: `
         <h5>The first input binds both ways Up and Down to the value.  The second input only binds to values coming down from the component not upwards!</h5>
         <label>Manual binding </label><input type="text" [(ngModel)]="contact['businessAddress']['line1']"/><br/>
         <label>Dynamic binding (Changing this doesn't update manual binding) </label><input type="text" [(ngModel)]="field.subKey ? contact[field.submitKey][field.subKey] : contact[field.submitKey]"/>
        `
 })
export class AppComponent {
     contact = {businessAddress:{line1:'default value'}};
     field = {submitKey:'businessAddress',subKey:'line1'};
}

如果动态输入不是一个方向的绑定,我就知道要修复什么,但是现在我不确定我在这里缺少什么。< / p>

1 个答案:

答案 0 :(得分:3)

尝试使用(ngModelChange)之类的

<input type="text" 
          [ngModel]="field.subKey ? 
                     contact[field.submitKey][field.subKey] : 
                     contact[field.submitKey]"
    (ngModelChange)="field.subKey ?
                     contact[field.submitKey][field.subKey] = $event :
                     contact[field.submitKey] = $event"/>

<强> Modified Plunker