Angular вложенные формыГруппы

Question

У меня возникли проблемы с обновлением формы с данными. У меня есть вложенный formGroup в другом formGroup, и данные, которые я получаю, не обновляют форму, они остаются пустыми. Я вижу данные в журналах, поэтому что-то не так с обновлением форм.

вот мой компонент:

this.editForm = this.formBuilder.group({
      id: [],
      date: ['', Validators.required],
      checkboxValue: this.formBuilder.group({ 
        closed: [],
        openFrom: [''],
        openTo: [''],
      })
    });

    console.log(this.editForm.value);
    this.httpClientService.getIrregularDaysById(+irregDayId)
      .subscribe(data => {
        this.irregDay = data;
        this.irregDay.openFrom = this.formatTime(this.irregDay.openFrom);
        this.irregDay.openTo = this.formatTime(this.irregDay.openTo);
        // this.irregDay.date = this.formatDate(this.irregDay.date);
        this.irregDay.closed = this.formatClosed(this.irregDay.closed);

        this.editForm.patchValue(data);
        console.log('getIrregularDaysById: ', data);
        console.log(data.date);
      });

и мой HTML:

<div class="col-md-6">
  <h2 class="text-center">Edit irregular day</h2>
  <form [formGroup]="editForm" (ngSubmit)="onSubmit()">

    <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <input matInput readonly [matDatepicker]="picker" placeholder="Please pick a date" formControlName="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
        <mat-error *ngIf="editForm.get('date').errors && (editForm.get('date').touched)">
          Date is required
        </mat-error>
      </mat-form-field>
    </div>

    <div formGroupName="checkboxValue">
      <div class="form-group">
        <mat-checkbox formControlName="closed" class="form-control" color="primary" [(ngModel)]="disabled">
          Closed</mat-checkbox>
      </div>

      <div class="material-input">
        <mat-form-field class="form-group" appearance="outline">
          <mat-label>Open from</mat-label>
          <div class="timepicker">
            <input matInput readonly [disableClick]="true" placeholder="Open from" formControlName="openFrom"
              [ngxTimepicker]="startTimePicker" [format]="24" [disabled]="disabled">
            <ngx-material-timepicker #startTimePicker></ngx-material-timepicker>
            <ngx-material-timepicker-toggle [for]="startTimePicker"></ngx-material-timepicker-toggle>
          </div>
          <mat-error *ngIf="editForm.get('openFrom')?.errors && (editForm.get('openFrom').touched)">
            This field is required
          </mat-error>
        </mat-form-field>
      </div>

      <div class="material-input">
        <mat-form-field class="form-group" appearance="outline">
          <mat-label>Open to</mat-label>
          <div class="timepicker">
            <input matInput readonly [disableClick]="true" placeholder="Open to" formControlName="openTo"
              [ngxTimepicker]="startTimePicker2" [format]="24" [disabled]="disabled">
            <ngx-material-timepicker #startTimePicker2></ngx-material-timepicker>
            <ngx-material-timepicker-toggle [for]="startTimePicker2"></ngx-material-timepicker-toggle>
          </div>
          <mat-error *ngIf="editForm.get('openTo')?.errors && (editForm.get('openTo').touched)">
            This field is required
          </mat-error>
        </mat-form-field>
      </div>
    </div>

    <button mat-raised-button color="primary" type="button" class="btn btn-success" [disabled]="!editForm.valid"
      (click)="onSubmit()" routerLink="/irregulardays">Update</button>
  </form>
</div>

Answer 1

Вы установили так

this.editForm.patchValue({
    id: ........,
    date: ......
})

Answer 2

Если вы хотите обновить FormGroup, вы можете использовать patchValue метод. Этот метод принимает в качестве объекта параметра, ключи которого совпадают с FormGroup именами элементов управления.

Например:

this.editForm.patchValue({
      id: data.id,
      date: data.date
      checkboxValue: {...data.checkboxValue}
    }

Так что, если checkboxValue также является FormGroup, вы можете обновить этот элемент управления следующим образом:

this.editForm.get('checkboxValue').patchValue({...data.checkboxValue});

Ваше решение. Я не знаю интерфейс получения данных в подписке, но думаю, что он может быть правильным:

this.httpClientService.getIrregularDaysById(+irregDayId).subscribe(data => {
  this.irregDay = {...data};
  this.irregDay.openFrom = this.formatTime(data.openFrom);
  this.irregDay.openTo = this.formatTime(data.openTo);
  this.irregDay.date = this.formatDate(data.date);
  this.irregDay.closed = this.formatClosed(data.closed);

  this.editForm.patchValue({
    id: data.id,
    date: data.date or this.irregDay.date if you need formatted data
    checkboxValue: {
      closed: data.closed or this.irregDay.closed if you need formatted data
      openFrom:  data.openFrom or this.irregDay.openFrom if you need formatted data
      openTo:  data.openTo or this.irregDay.openTo if you need formatted data
    }
  });
});

Answer 3

В методе formGroup patchvalue должен быть указан параметр с парой ключ-значение.

formgroup.patchValue({name:’Mocrosoft’});

В вашем случае.

this.editForm.patchValue(
                {   
                  id: data.id,
                  date: data.date, {
                  checkboxValue: { 
                  openFrom: true 
                }}});

Я нашел лучший пример, который нашел, это , https://stackblitz.com/edit/angular-patch-value-deeply-nested-component