Angular 2+ ngModel仅对带有对象括号表示法的嵌套值绑定动态ngModel的一种方式

Question

What I've got is an object for ngModel that's generated dynamically, and certain properties that don't live on the top level are only binding in one direction.

Including a plunkr that should make things clearer, but what I'm trying to do is generate a dynamic form and if a property is nested at a level beneath the root to use object bracket notation. My only thought is maybe putting the ternary operator in ngModel is bad form, but I've run into errors just trying to call a function from within ngModel.

Plunkr here : 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'};
}

If that dynamic input wasn't binding in one direction, I'd have some idea of what to fix, but for now I'm not sure what I'm missing here.

Answer 1

Try using (ngModelChange) like

<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