Angular嵌套formGroups

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.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

Answer 3

如果你想更新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
    }
  });
});