编辑填写的表格并使用 Ionic/Angular 重新提交

Posted 2023-03-16

【中文标题】编辑填写的表格并使用 Ionic/Angular 重新提交

【英文标题】：Edit a filled form and resubmit it with Ionic/Angular

【发布时间】：2021-10-13 17:46:24

【问题描述】：

我在 Ionic 移动应用程序上工作。 我有一个显示数据的表单（该数据来自网络服务）。是否可以编辑该表单然后提交以进行更改？ 我尝试这样做，但没有设法编辑预填充字段（例如删除一个字母或单词，添加一些字符..），就好像该版本已被禁用一样。

这是 HTML 部分（文本区域的示例）：

<ion-list>
  
  <ion-item>
    <ion-label >Text area example</ion-label>
    <!-- com field comes from a webservice-->
    <ion-textarea  [(ngModel)]="editcom">com</ion-textarea>&nbsp;
  </ion-item>  
  
    <ion-button color="danger" (click)="editForm()" expand="block">OK</ion-button>

</ion-list>

这里是 TS 部分：

editForm()
      console.log(this.editcom);
      this.service.postObjets(this.editcom); // send Data to Database
  

我使用该 sn-p 从 GIS WMS Web 服务获取数据：

  let promise =   this.http.get(WMS_Webservice_URL).toPromise();
  await promise
  .then((data)=>
    var com = (data['features'][0]['properties']['com']);
    this.com = com;
  )
  .catch((error)=>
    this.com = '';
  );

任何帮助将不胜感激，谢谢

【问题讨论】：

你能发布你从服务器获取数据的函数吗？

好了，搞定了！

我建议你尝试使用 FormControl/FormGroup。

使用双向绑定的 ngmodel 时，不需要使用插值。删除 com 并更改 [(ngModel)]="com"。现在对 textarea 的任何更改都将在 com

上生效

非常感谢@Qiimiia，我的错我忘了使用双向绑定..我做了修改，它完美地工作。太好了！

【参考方案1】：

当您使用双向绑定时，您不需要使用插值。删除com 并更改[(ngModel)]="com"。现在 textarea 中的任何更改都将在com 上生效。你不再需要editcom。