Formarray 不显示从 service/api 收到的所有记录

Question

我正在尝试将从 webapi 接收到的对象修补为 angular 反应形式。表单也有一个格式数组。但是，尽管有超过 3 条或更多的记录，但只有 2 条记录被修补到反应形式的数组中。

我有两个实体 noseries 和 noseriesList，其中一个 noseries 有零个或多个 noseriesList。因此，在从 webapi 获取 noseries 之后，我想将 noseries 的属性和导航列表 "noseriesLists" 修补为反应形式。其余属性已正确修补，但只有导航列表 "noseriesLists" 的 2 条记录被修补到嵌套在反应式表单中的 formArray。

//initialization of form
    this.noseriesForm = this.fb.group({
      id: [null],
      description: ['', Validators.required],
      code: [ '', Validators.compose([Validators.maxLength(10), Validators.required])],
      noSeriesList: this.fb.array([
         this.initLine(), this.initLine()
      ])
    });

//patching the object received from service to form
 this.route.params.subscribe(routeParam => {
      if (routeParam.id) {
        this.noseriesService.get(routeParam.id)
        .subscribe((data: NoSeries) => {
          this.isCreateMode = false;
          this.noseries = data;
          this.noseriesForm.patchValue(this.noseries);
          console.log(this.noseries, 'data from api');
          console.log(this.noseriesForm.value,'formvalue');
        });
      }

    });

//initialise formArray
  initLine(): FormGroup {
    return this.fb.group({
      id: [null],
      startingNoSeries: ['', Validators.required],
      endingNoSeries: '',
      lastUsedSeries: '',
      effectiveDate: [null],
      endingDate: [null],
      noSeriesId: [null]
    });
  }

记录从服务接收到的数据显示 3 个 noseriesList 记录，而记录 formvalue 仅显示 2 个 noseriesList 记录。

Answer 1

第一次初始化表单数组时，您添加了两个空控件。这就是为什么当您将 value 修补到 formgroup 时，只有那两个空控件会被填充。在修补值之前，您应该使用要修补的控件数量填充 formarray。

//patching the object received from service to form
this.route.params.subscribe(routeParam => {
    if (routeParam.id) {
        this.noseriesService.get(routeParam.id).subscribe((data: NoSeries) => {
          this.isCreateMode = false;
          this.noseries = data;

          const nsList = this.noseriesForm.get("noSeriesList") as FormArray;
          nsList.clear();
          this.noseries.forEach(_ => nsList.push(this.initLine()));

          this.noseriesForm.patchValue(this.noseries);
          console.log(this.noseries, 'data from api');
          console.log(this.noseriesForm.value,'formvalue');
        });
    }

});

Formarray 不显示从 service/api 收到的所有记录

Formarray doesnt show all the records received from service/api

angular7

angular-reactive-forms

formarray

webapi2