如何使用ngModel绑定预​​填充表单

Question

我创建了一个Modal页面，我希望每当用户pre-populated data必须绑定到我的本地{edits时向用户展示data collectDataInModalPage_afterEdit 1}}。

演示：https://stackblitz.com/edit/ionic-jse3zv?file=pages%2Fhome%2Fhome.ts

问题： [(ngModel)]="collectDataInModalPage_afterEdit"＆lt; =此ngModel将form留空，因为它在begining处设置为空白

    collectDataInModalPage_afterEdit = {
       "first_name":"",
       "last_name":"",
      "mobile_number":""
  };   

我为填充的[(ngModel)]字段取出了mobile_number，请参阅演示

问题：我想pre-populate表格data =＆gt; userDataBeforeEdit并希望将data收集到此=＆gt; collectDataInModalPage_afterEdit

演示：https://stackblitz.com/edit/ionic-jse3zv?file=pages%2Fhome%2Fhome.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  userDataBeforeEdit = {
    "first_name":"John",
  "last_name":"Doe",
  "mobile_number":"98869934445",
};

collectDataInModalPage_afterEdit = {    "first_name":"","last_name":"","mobile_number":""};      

  constructor(public navCtrl: NavController) {

  }

}

HTML

<ion-item>
    <ion-label floating>Name</ion-label>         
    <ion-input type="text" value="{{userDataBeforeEdit.first_name}}" [(ngModel)]="collectDataInModalPage_afterEdit.first_name"></ion-input>                
 </ion-item> 


 <ion-item>
    <ion-label floating>Last Name</ion-label>   
    <ion-input type="text" value="userDetails" [(ngModel)]="collectDataInModalPage_afterEdit.last_name"></ion-input>                
  </ion-item> 


   <ion-item>
    <ion-label floating>Phone Number</ion-label>   
    <ion-input type="text" value="{{userDataBeforeEdit.mobile_number}}"></ion-input>                         
  </ion-item> 

请帮助我谢谢Adavance !!!!

Answer 1

在这种情况下，我要做的只是使用Object.assign并完全跳过value，所以：

collectDataInModalPage_afterEdit = {};     

ngOnInit() {
  this.collectDataInModalPage_afterEdit = Object.assign({},this.userDataBeforeEdit)
}

然后，您可以使用this.collectDataInModalPage_afterEdit

在模板中使用[(ngModel)]

DEMO：https://ionic-ovntia.stackblitz.io

我不知道如何在这种情况下使用value和ngModel就像你想要的那样。

其他选项是，如果这是一个表单（似乎可能）是构建表单（使用value），那么在提交时您可以将表单对象直接分配给您的变量{ {1}}