Question

我在定义反应式模型中的数组时遇到了一些问题：（由于被动来源无法简单地接受模型（afaik）并由其工作，因此我需要手动定义它）：

后端的对象

  {
    propOne: 'X',
    propTwo: 'Y',
    propArray: [
      {
        objPropA: 'a',
        objPropB: 'b'
      },
      {
        objPropA: 'c',
        objPropB: 'd'
      },
            {
        objPropA: 'e',
        objPropB: 'f'
      }
    ]
  }

组件：

 ngOnInit() {
    this.myForm = this.fb.group({
      propOne: '',
      propTwo: '',
      propArray: this.fb.array([this.createItem(), this.createItem(), this.createItem()])
    });

    // apply the value to the form
    this.myForm.setValue(this.valueFromBackend);
  }

  private createItem(): FormGroup {
    return this.fb.group({
      objPropA: '',
      objPropB: '',
    });
  }

我希望避免在定义表单时为期望的每个元素（this.createItem() x ElementsCount）创建一个表单组。

我真的需要定义我期望数组中有多少个元素吗？

我做错了吗？

Answer 1

这是您可以采用的一种方法。您可以遍历propArray（后端响应项），然后将值推入数组。之后，您可以使用新创建的数组从中创建一个FormArray。

  ngOnInit() {
    this.myForm = this.fb.group({
      propOne: '',
      propTwo: '',
      propArray: this.fb.array
    });

    // dynamically set value
    this.myForm.setValue(this.valueFromBackend);
    let propertyArray: any = [];
    for(let item of this.valueFromBackend.propArray) {
      propertyArray.push(this.createItem(item));
    }
    this.myForm.controls['propArray'] = this.fb.array(propertyArray);
    // log the form
    console.log(this.myForm.controls['propArray']);
  }

  private createItem(item): FormGroup {
    return this.fb.group({
      objPropA: item.objPropA,
      objPropB: item.objPropB,
    });
  }
}

Stackblitz

Answer 2

尝试一下，在您的formArrayLength: number; propArray; ngOnInit() { this.myForm = this.fb.group({ propOne: '', propTwo: '', propArray: this.fb.array([this.createItem()]) }); this.formArrayLength = yourObject.propArray.length; this.addFormGroups(); } addFormGroups() { this.propArray = this.myForm.get('propArray') as FormArray; for(let i=0;i<this.formArrayLength ;i++) { this.propArray.push(this.createItem()); } }中从后端获取数据后：

</div>
<h2>- wcwcwxcwxc -</h2>
<div class="container-formation">
<div class="block_formation white_background">
<p class="p">wxcwxcwxcwxc</p>

</div>
<div class="block_formation white_background">
<p class="p">wxcwxcwxcwxc</p>

</div>
<div class="block_formation white_background">
<p class="p">wxcwxcwxcwxc</p>

</div>
<div class="block_formation white_background">
<p class="p">wwxcwxcwxcwxc</p>

</div>
<a href="qsdfjnsdfkjsfsjdfbdsoif">
<div class="block_formation white_background">
<p class="p">wxcwxcwxcwxc</p>
</div>
</a>
</div>

Answer 3

这将为您提供帮助

   ngOnInit() {
        this.myForm = this.fb.group({
          propOne: '',
          propTwo: '',
          propArray: this.fb.array([this.createItem()])
        });

        // apply the value to the form
        this.myForm.setValue(this.valueFromBackend);
    this.myForm.controls['propOne'].setValue(this.valueFromBackend.propOne);
    this.myForm.controls['propTwo'].setValue(this.valueFromBackend.propTwo);
      let count = 0;
      const propArrayLength: number = this.valueFromBackend.propArray.length;
      if (propArrayLength > 0) {
        for (count = 0; count < this.valueFromBackend.propArray.; count++) {

            (<FormArray>this.myForm.controls['propArray']).at(count).get('objPropA')
            .setValue(this.valueFromBackend.propArray[count].objPropA);
            (<FormArray>this.myForm.controls['propArray']).at(count).get('objPropB')
            .setValue(this.valueFromBackend.propArray[count].objPropB);

            this.createItem();
      }
    }
      private createItem(): FormGroup {
        return this.fb.group({
          objPropA:[''],
          objPropB: [''],
        });
      }

反应性表单：Form Builder，在表单模型中动态设置数组大小

3 个答案: