Error when using setControl or patchValue in angular form array

Question

Please assist, I have nested form array, se below :

  this.form = this.formBuilder.group({
        projectTitle: ['', [Validators.required, Validators.maxLength(300)]],
        projectDescription: ['', [Validators.required, Validators.maxLength(300)]],
        funding: this.formBuilder.array([this._buildFundingItems()]),
    });

the this._buildFundingItems() is as follows

        private _buildFundingItems(): FormGroup {
          return this.formBuilder.group({
          items: ['', [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]],,
          amount: ['', [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]],
        });
     }


    // after reloading the page, i get data from api and I tried setting the value as follows 
    this.form.setControl('funding', this.formBuilder.array(data.funding || []));

doing the above or this.form.setControl('funding', this.formBuilder.array(data.funding || [])); i getting an error : Cannot find control with path: 'funding -> 0 -> amount' and Cannot find control with path: 'funding -> 0 -> items'.

Before i did the following below, i was not receiving any errors but when updating the form or (on valuechanges), the formarray was not updating.

     let length: number = data[0].funding.length;
     while (length-- > 0) {
         fundingSupport.push(this._buildFundingItems()); 
     }

     this.form.controls['funding'] = this.formBuilder.array([]);                   
     this.form.controls['funding'].patchValue(data.funding)

I saw the following link Angular 4 patchValue based on index in FormArray that's why i tried the first approach.

can u create stackblitz example??

Akj
– Akj

2018-08-02 10:45:09 +00:00
Commented Aug 2, 2018 at 10:45 — Akj
– Akj, Commented Aug 2, 2018 at 10:45

Eliseo · Accepted Answer · 2018-08-03 06:15:01Z

It's difficut help if we don't know the data you have or the data you want to get. I supouse your data was like

{
  projecTitle:"title",
  projectDescription:"description"
  items:[{
     items:"item 1",
     amount:10
  },
  {
     items:"item 2",
     amount:5
  }]

}

why not use a function to create the form with the data included?

    createForm(data:any)
    {
    this.form = this.formBuilder.group({
            projectTitle: [data?data.projecTitle:'', [Validators.required, Validators.maxLength(300)]],
            projectDescription: [data?data.projectDescription:'', [Validators.required, Validators.maxLength(300)]],
            funding: //See that I change your formBuilder to return
                     //an array, this is because when create the array don't enclosed
                     // by [ ]

                    this.formBuilder.array(this._buildFundingItems(data?data.items:null)),
        });
    }

    //see that I was to return an array of FormGroup
    _buildFundingItems(items:any[]|null):FormGroup[]
    {
    return items?items.map(x=>{
            return this.formBuilder.group({
              items: [x.items, [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]]
              amount: [x.amount, [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]]
            }):
 this.formBuilder.group({
          items: ['', [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]],,
          amount: ['', [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]],
        });

    }

You can see that you call the function createForm sending data: this.createForm(data), create the form with the date. If you call the function sending null: this.createForm(null) create a empy form

Akj · Accepted Answer · 2018-08-02 11:10:08Z

0

Try something like this:

this.form = this.formBuilder.group({
  projectTitle: ['', [Validators.required, Validators.maxLength(300)]],
  projectDescription: ['', [Validators.required, Validators.maxLength(300)]],
  funding: this.formBuilder.array([this._buildFundingItems({ items: null, amount: null })]),
});

 _buildFundingItems(data): FormGroup {
  if (!data) {
      data = {
        items: null,
        amount: null
      }
  } 
  return this.formBuilder.group({
        items: [data.items, [Validators.required, Validators.pattern(this.regexValidation.shortWordRegex)]],
      amount: [data.amount, [Validators.required, Validators.pattern(this.regexValidation.amountTypeRegex)]],
     })

}

answered Aug 2, 2018 at 11:10

Akj

7,2513 gold badges31 silver badges41 bronze badges

Comments

jpeg · Accepted Answer · 2019-02-22 10:29:20Z

0

I faced the same issue. Try this sort of thing by creating formBuilder group for each row:

let employeeFormGroups = team.employees.map(employee => this.formBuilder.group(employee));
let employeeFormArray = this.formBuilder.array(employeeFormGroups);
this.teamForm.setControl('employees', employeeFormArray);

For more help, you may refer to this link: https://www.concretepage.com/angular-2/angular-2-4-formbuilder-example

edited Feb 22, 2019 at 10:29

jpeg

2,4814 gold badges22 silver badges34 bronze badges

answered Feb 22, 2019 at 9:54

Himanshu Agarwal

1

Collectives™ on Stack Overflow

Error when using setControl or patchValue in angular form array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related