Угловая форма сбора данных в неправильном формате - PullRequest
Новая
       23

Угловая форма сбора данных в неправильном формате

0 голосов
/ 26 мая 2018

У меня есть данные, поступающие с 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.Почему форма отправляет данные не так, как она их ввела?Как мне сохранить его в том же формате, в котором он был?Что я делаю не так?

Я готов изменить форматирование дней работы, если это улучшит / облегчит ситуацию.

1 Ответ

0 голосов
/ 26 мая 2018

Вместо того, чтобы брать 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)
}

Вот пример StackBlitz

...