PatchValue or setValue with formGroup more formArray and formGroup

Question

I have the second forms. I need to fill in the fields with the date coming from the bank, a json file. In the populateFields method I get a parameter with the data that will be filled. But, it fills only the values of itens, description that is inside the array, it does not execute.

Error:

ERROR Error: Uncaught (in promise): TypeError: _this.form.controls.itens.value [i] .description.patchValue is not a function

I tried to use the following expression:

this.form.controls.itens.value[i].description.patchValue(item.description);

However, I get the error mentioned above.

 generateFormGroup(): void {
        this.form = this._formBuilder.group({
          id: [null],
          alias: ['Relatório de Despesa', [Validators.required, Validators.maxLength(50)]],
          job: [null, [Validators.required]],
          customer: [{ value: null, disabled: true }, [Validators.required]],
          contact: [{ value: null, disabled: true }, [Validators.required]],
          currency: [{ value: 1, disabled: true }, [Validators.required]],
          exchangeRate: [{ value: null, disabled: true }],
          advanceValue: ['0'],
          itens: this._formBuilder.array([this.createItem()]),
        });
      }

      createItem(): any {
        return this._formBuilder.group({
          id: [null],
          product: [null, [Validators.required]],
          productIcon: [null],
          description: this._formBuilder.group({
            descriptionProduct: [null],
            origin: [null],
            km: [null],
            destination: [null],
            rental: [null],
            days: [null],
            reason: [null],
            taglist: [null]
          }),
          date: [this.today, [Validators.required]],
          value: [0, [Validators.required, Validators.min(0.01)]],
          currency: [{ value: 1, disabled: true }, [Validators.required]],
          currencyAlias: [this.currency],
          receipt: [null],
          isLoading: [false],
          receiptId: [null],
          receiptExtension: [null],
        });
      }

    populateFields(data: any): void { 
 data.itens.forEach((item, i) => {
 this.form.controls.itens.value [i] .description.patchValue (item.description) // error
          }   
            this.itens = data.itens;
            this.form.controls.itens.patchValue(data.itens);

      }

zer0 zer0 · Accepted Answer · 2018-12-01T21:49:14

this.form['controls']['itens']['controls'][index]['controls'].description.patchValue(item.description);

Update:

I used the square brackets notation of accessing properties to suppress errors like Property 'controls' does not exist on type 'AbstractControl'

you can read more about it on this Github Page

This is an issue only when you have multiple levels of formcontrols. If you have something straight forward you can use the . notation or even the .get() method to access controls

this.form.controls.someControl.patchValue(someValue)

this.form.get('someControl').patchValue(someValue)

The above two do the same thing. If it's a straightforward form array, you can use the .at() method

Combining these and doing some type casting, you can do something like this

((this.form.get('controls') as FormArray).at(index) as FormGroup).get('description').patchValue(item.description);

Theoretically the above should work :)

PatchValue or setValue with formGroup more formArray and formGroup

2 Answers