如何在角度构建形式的输出以符合静止输入

Question

预先感谢您的帮助。

我的角度形式产生输出：

{user: "3", comment: "comment"}
comment: "comment"
user: "3"

对于我的休息输入，我正在寻找：

{
 "user": {
  "id": 2
}, 
  "comment": "this is a comment"
}

我在更新控制器侧与调整表单输出的方法之间的圆圈运行。

这是我在形式方面所拥有的：

<div *ngIf='clientDetail'>
      <strong>NAME:</strong> {{gotClient.firstName}} {{gotClient.lastName}} <BR>
      <strong>EMAIL:</strong>{{gotClient.email}}<BR>
      <strong>PHONE:</strong>{{gotClient.phone}}<BR>
      <strong>AGENT:</strong>{{gotClient.agent}}<BR>
        <HR>
          <form #h="ngForm" (ngSubmit)="onSubmitComment(h)" novalidate>
          CLIENT: <input type="text" name="user" ngModel="{{gotClient.id}}"><BR>
          INPUT: <input type="text" name="comment" ngModel="comment"><BR>
          <!-- <button (click)='addComment(comment)'>Add Comment</button> -->
          <button>Submit</button>
          </form>
          <P></P>
      <strong>COMMENTS:</strong><BR>
          <ul *ngFor="let item of gotClient.comments">
              <li>{{item.comment}}</li>
          </ul>
  </div>

我的具体问题(我认为(是如何修改表单输出？

编辑：

onSubmitComment(h: NgForm) {
console.log('H VALUE: ' + h.value)
  console.log('this is the comment: ' + h.value.comment);
  console.log('this is the id: ' + h.value.id);
  this.crmRest.createComment(h.value).subscribe(
    data => {
      this.ngOnInit();
    },
    err => console.error('Observer got an error: ' + err)
    );
  h.resetForm();
} 

Answer 1

，而不是直接发送h.value尝试：

const dataToSend = {
  "user": {
    "id": h.value.user
  },
  "comment": h.value.comment
};

然后在您的API调用中使用它： this.crmRest.createComment(dataToSend).subscribe(

将ID置于 h.value.id表格中，请尝试以下绑定：

[ngModel]="gotClient.id"

查看当前表单值使用以下方式：

<pre>
  {{ h.value | json }}
</pre>

工作stackblitz。