Реактивные формы: построитель форм, динамически устанавливаемый размер массива в модели формы

Question

У меня возникла небольшая проблема, связанная с определением массива в модели реактивных форм: (поскольку реактивные команды не могут просто принять модель (afaik) и работать с ней, мне нужно определить ее вручную):

Stackblitz

Объект из бэкэнда:

  {
    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 (элемент ответа Backend), а затем передать значения в массив.После этого вы можете использовать этот только что созданный массив для создания из него 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

Это вам поможет

   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: [''],
        });
      }

Answer 3

Попробуйте, как только вы получите данные из бэкэнда в вашем component.ts:

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());
}

}