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

问题描述

我正在尝试将从webapi接收的对象修补为有角反应形式.表单也有一个formarray.但是，尽管有3条或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获得noseries之后，我想将noseries的属性和导航列表"noseriesLists"修补为反应形式. 其余属性均已正确打补丁，但导航列表"noseriesLists"中只有2条记录被打补丁到嵌套在反应式表单内的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仅显示2条noseriesList记录.

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

推荐答案

首次初始化表单数组时，将添加两个空控件.这就是为什么在将值修补到formgroup时，仅填充这两个空控件的原因.您应该在要修补值之前将要修补的控件数量填充到formarray中.

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