angular: Reactive forms - can't add additional data with FormArray

I’m submitting a …

[ x ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request

Current behavior When working with FormArray, there is no way to add additional data to the markup.

Expected behavior We need a way to add additional data to the markup.

What is the motivation / use case for changing the behavior? The best example is labels for checkboxes and radio buttons.

@Component({
  selector: 'my-app',
  template: `
    
     <form [formGroup]="checkboxGroup">
      <div formArrayName="food">
        <div *ngFor="let control of foodArray.controls; let i=index">
          <input [formControlName]="i" type="checkbox">
          // I don't have a way to set label for example
        </div>
      </div>
     </form>
     
    <div>{{checkboxGroup.value | json}}</div>
     { "food": [ true, false, true ] }
  `,
})
export class App {

  checkboxGroup: FormGroup;
  foodArray: FormArray;
  constructor(_fb: FormBuilder) {

    this.foodArray = new FormArray(
      [
        new FormControl(true),
        new FormControl(false),
        new FormControl(true)
      ]
    );
    
    this.checkboxGroup = _fb.group({
      food: this.foodArray
    });
    
  }
}

There are two problems with this approach:

I can’t set a dynamic label for every input.
It’s useless in most of the case that the value of the food is an array of true/false. ( usually we are sending objects to the server )

The right way for my opinion is something like this:

new FormControl( { checked: true/false, label: "pizza", id: 3, ...more data } )

// The form food value
[{checked: true/false, label: "pizza", id: 3, ...more data}]

Angular version: 2.0.X

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (3 by maintainers)

Most upvoted comments

have u tried template driven forms?

+20

DzmitryShylovich on Jan 9, 2017

@ArielGueta this confuses me, why are you not using FormGroups in your array? Something like

constructor(fb: FormBuilder) {
    this.foodArray = new FormArray(
      [
        this.newItem()
      ]);
  }
  
add(){
   this.foodArray.push(this.newItem());
}

newItem() {
    return fb.group({
       checked: '',
       id: '',
       label: ''
    })
  }

This is neither a bug nor a feature request - it is working as intended, therefore this is a help request. Please use other channels such as gitter https://gitter.im/angular/angular or SO for future help requests

Toxicable on Jan 11, 2017

@Toxicable group is forking but what if you have a table with 50 record and each of them in this case is a group. It is difficult organize form validation check in this case.

andreyfomin on Feb 7, 2018

I don’t think a FormArray is the good choice here. It is more suited to build an array of values like

const selectedFruits = [ 'apple', 'orange' ]

To get the proper structure for your form I’d rather use a FormGroup like in this plunk http://plnkr.co/edit/wiOKyhE5EKAA5hh85T1u?p=preview and have my data like that

{ "1": true, "2": false }

Of course you can zip it later to get only selected fruit ids

red-0ne on Jan 9, 2017

That’s nice but still, why I need to do this like that when working with reactive forms? And you still missing the point of how I can know which object is connected to this true/false value? ( like in the template driven example )

I fill like I am punishing myself because I’m working with reactive forms.

ArielGueta on Jan 9, 2017