patchValue / setValue对FormGroup无效

时间:2018-10-29 20:52:16

标签: angular typescript

我得到一个FormGroup,其中包含要约,如下所示:

{
  2018-01-01: [
    {id: 1},
    {id: 2}
  ],
  2018-01-02: [
  ]
}

因此FormGroup包含FormArray个,它们本身携带了更多FormGroup个。

到目前为止,一切正常。我将此保存到后端,然后从那里检索该数据。

但是,patchValue / setValue无效的是:

this._offerService.getFromTo(this.placeId, this._fromDate, this._toDate)
  .subscribe(
    (data) => {
      this.offers = data;
      if (Object.keys(this.offers).length > 0) {
        this.form.patchValue(data);
        console.log(this.form.value);
      }
    }
  );

我已经console.log设置了返回值,对我来说看起来还不错。它包含正确的值。但是,由于某些原因,console.log(this.form.value);不会向我显示data的更新值,并且我看不出出现这种情况的原因。

知道为什么这可能行不通吗?

更新

我也按照评论中的建议尝试了以下操作:

this.offers = data;
if (Object.keys(this.offers).length > 0) {
  console.log(this.offers);
  for (const k of Object.keys(this.offers)) {
    console.log(this.offers[k]);
    this.form.get(k).patchValue(this.offers[k]);
  }

但是还是一样。表格没有更新。


这是表单的构建方式

主要/父组件创建form,其中每个项目均为FormArray

  resetCalendarForm() {
    const groups = {};

    this.dates.forEach(d => {
      groups[d] = this._formBuilder.array([]);
    });

    if (Object.keys(groups).length > 0) {
      this.form = this._formBuilder.group(groups);
    }

    this.formValueChange$ = this.form.valueChanges.subscribe((v) => {
      this.dirtyChange.emit(this.form.dirty);
    });

    // This call is important after resetting in order to propagate the 'dirty' state
    this.form.updateValueAndValidity();
  }

子组件将此FormArray传递给以下成员:

  <app-calendar-day *ngFor="let date of dates$ | async" 
                    [formArray]="form.get(date)">
  </app-calendar-day>

其中,随着项目的选择,formArray被表示元素的FormGroup扩展:

  onItemSelected(item) {

    if (item == null) {
      // Do not insert an element
      return;
    }

    const offer = new OfferModel();
    offer.item = item;
    offer.offerDate = this.date;

    this.formArray.push(this._formBuilder.group(offer));
    this.formArray.markAsDirty();

    this.resetMenuSearch();
  }

这是来自服务器的数据 我希望在this.form之后由patchValue反映出来:

enter image description here


这是this.form.value(不幸的是,在之后 patchValue):

enter image description here

0 个答案:

没有答案