Angular: Error on create form array inside form array

Question

This is the stackblitz with the error: https://stackblitz.com/edit/angular-ivy-2wzubf

This is the error i get: Cannot find control with path: 'config -> URL -> 1 -> priority'

Well, i have this form configured with reactiveForms:

this.formDatasource = this.fb.group({
      name: ['', Validators.required],
      baseUrl: ['', Validators.required],
      config: this.fb.group({
        SEARCH: this.fb.array([this.createKeyValue()]),
        URL: this.fb.array([
          this.fb.group({
            priority: ['', Validators.required],
            key: ['', Validators.required],
            value: this.fb.array([
              this.fb.group({
                param: ['', Validators.required],
                rule: ['']
              })
            ])
          })
        ]),
        TEMPLATE: this.fb.group({
          advert_none_container: [''],
          advert_string_title: [''],
          advert_number_price: [''],
          advert_number_area: [''],
          advert_number_bedroom: [''],
          advert_number_bathroom: [''],
          advert_number_box: [''],
          advert_url_link: [''],
          advert_array_photo: [''],
          advert_location_address: ['']
        })
      })
    });

Inside config i have URL, that is an array of fields: priority, key, value. Value is is an array of param and rule.

[![enter image description here][1]][1] The button in the red circle works well, it's an array of fields too, but the button in the blue circle throws me the error, i don't know whats going on with these form :/ [1]: https://i.sstatic.net/yhZkI.png

I seems to be trying to access index 1, however, your array only has one item so it should be accessing index 0? — MikeOne
– MikeOne, Commented Jul 7, 2021 at 18:37

Eliseo · Accepted Answer · 2021-07-07 20:33:42Z

You has an error in your function addDataSourceUrlItemsButton, you should add this.addDataSourdeUrlItems, not keyPair

  addDataSourceUrlItemsButton() {
    this.dataSourceConfigURLItems = this.formDatasource.get(
      'config.URL'
    ) as FormArray;
    this.dataSourceConfigURLItems.push(this.addDataSourceUrlItems());
  }

Futhermore, to iterate the second formArray you should be use formDatasource.get('config.URL.'+i+'.value')['controls']

   <div class="col-sm-4 col-md-6 col-xl-6 col-lg-6"
    formArrayName="value"
    *ngFor="let field of formDatasource.get('config.URL.'+i+'.value')['controls'];
                let j = index;">
      <div [formGroupName]="j" class="row">
        ...
      </div>
    </div>

But I recomended be carefull with the name of the functions and create functions to get the formArray.

Yes, divide the problem, so first -from deeper level- create the functions

createValueElement(){
   return this.fb.group({
                param: ['', Validators.required],
                rule: ['']
              })
}

createURLElement(){
   return this.fb.group({
        priority: ['', Validators.required],
        key: ['', Validators.required],
        value: this.fb.array([this.createValueElement()])
        })
}

createSEARCHElement(){
  return this.fb.group({
    key: ['', Validators.required],
    value: ['', Validators.required]
  });
}

To get the formArrays you can use

  get searchArray()
  {
    return this.formDatasource.get('config.SEARCH') as FormArray
  }

  get urlArray()
  {
    return this.formDatasource.get('config.URL') as FormArray
  }

  valueArray(index)
  {
    return this.urlArray.at(index).get('value') as FormArray
  }

See that the formArray inside the FormArray you need indicate the "index".

So all is more "easy":

1.-When iterate in the html you can iterate over searchArray.control, urlArray.controls and valueArray(i).controls

2.-Add en element or remove becomes like,e.g.

this.searchArray.push(this.createSearchElement())
this.searchArray.removeAt(index)

Great!! You're awesome. Thank you a lot, i will use your recomendation too ^^

Collectives™ on Stack Overflow

Angular: Error on create form array inside form array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related