Formarray 不显示从服务/api 收到的所有记录 [英] Formarray doesnt show all the records received from service/api

问题描述

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

I am trying to patch the object received from webapi to an angular reactive form. The form also has a formarray. But, despite having more than 3 or more records only 2 records are being patched to the formarray of the reactive form.

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

I have two entities noseries and noseriesList, where a noseries has zero or many noseriesLists. So after obtaining noseries from webapi, i want to patch properties and navigation list "noseriesLists" of noseries into reactive form. Rest of the properties are being patched properly, but only 2 records of navigation list "noseriesLists" is being patched to the formArray nested inside the reactive form.

//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 只显示了 noseriesList 的 2 个记录.

logging the data received from service shows 3 noseriesList records, whereas logging formvalue only shows 2 records of noseriesList.

推荐答案

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

while you are initializing the form array for the first time you are adding two empty controls. that's why when you patch value to formgroup, only those two empty controls get filled. you should fill the formarray with number of controls that is going to be patched before patching a value.

//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 不显示从服务/api 收到的所有记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！