Question

我有来自json服务器的数据，它可以准确显示我想要和期望的内容，但是在保存更改时，它不会以与它相同的格式保存。

这是我的表格：

<form (ngSubmit)="saveProfile(form.value, form.valid)" #form="ngForm" novalidate>
  ...
  <input 
    matInput 
    placeholder="Company Name" 
    type="text"
    name="companyName"
    required
    #companyName="ngModel"
    [ngModel]="profile?.companyName">

  <!-- Code in question below: -->
  <ul class="days-of-operation">
    <li *ngFor="let day of profile?.daysOfOperation">
      <mat-checkbox
        [name]="day.day"
        [ngModel]="day.open">
        {{day.day}}
      </mat-checkbox>
    </li>
  </ul>
  ...
  <button type="submit" [disabled]="form.invalid">
    Update Profile
  </button>
</form>

以下是有效的JSON：

{
  "profile": {
  "companyName": "Example Company",
    "daysOfOperation": [
      {
        "day": "Sunday",
        "open": false
      }, {
        "day": "Monday",
        "open": true
      }, {
        "day": "Tuesday",
        "open": true
      }, {
        "day": "Wednesday",
        "open": true
      }, {
        "day": "Thursday",
        "open": true
      }, {
        "day": "Friday",
        "open": true
      }, {
        "day": "Saturday",
        "open": true
      }
    ],
    ...
  }
}

以下是我点击更新按钮时form.value向saveProfile方法发送的数据：

{
  "companyName": "Example Name",
  "Sunday": false,
  "Monday": true,
  "Tuesday": true,
  "Wednesday": true,
  "Thursday": true,
  "Friday": true,
  "Saturday": false
}

如您所见，表单以完全不同的格式收集数据。这适用于companyName。我可以将其更改为我想要的任何内容，保存它，它将以我保存的方式返回，但日期不再在daysOfOperation对象内传递。为什么表单以不同的方式发送数据？如何以与进入格式相同的格式保存？我做错了什么？

如果能让事情变得更好/更容易，我愿意改变操作日的格式。

Answer 1

您可以简单地绑定到现有对象，而不是使用form.value，而是使用this.profile：

像这样更改ngModel：

  <mat-checkbox
    [name]="day.day"
    [(ngModel)]="day.open">
    {{day.day}}
  </mat-checkbox>

在您的saveProfile中，只需使用this.profile，就像这样：

saveProfile() {
  console.log(this.profile)
}

Here is a StackBlitz example

Angular表单以错误的格式收集数据

1 个答案: