Reactive forms - can't add additional data with FormArray

[ArielGueta]

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:

1. I can't set a dynamic label for every input.
2. 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

[DzmitryShylovich]

can u pls add a small repro of what are u trying to accomplish in plunkr?

[ArielGueta]

http://plnkr.co/edit/a0jfpicT23408K2eqyDC?p=preview

[ArielGueta]

In Angular js you could do something like this:

<label ng-repeat="fruit in fruits">
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruit.name}}"
    ng-model="fruit.selected"
  > {{fruit.name}}
</label>

 $scope.fruits = [
    { name: 'apple',    selected: true },
    { name: 'orange',   selected: false },
    { name: 'pear',     selected: true },
    { name: 'naartjie', selected: false }
  ];

Now we can't add labels ( or additional data ) to the markup based on our model. ( see fruit.name in this example )

[DzmitryShylovich]

have u tried template driven forms?

[ArielGueta]

I don't want to work with template driven. My all app is with reactive forms and I like the reactive approach.

[DzmitryShylovich]

I asked because I believe your example from ng1 can be accomplished with template driven forms.

[ArielGueta]

Yes, I saw on the internet this solution:

@Component({
  selector: 'my-app',
  template: `
    <form #f="ngForm">
      <div *ngFor="let category of categories;">
        <input type="checkbox" 
        [ngModelOptions]="{standalone: true}"
        [(ngModel)]="category.selected"/> {{category.title}}
      </div>
      <button (click)="getSelectedCategories()">Get selected categories</button>
    </form>
  `,
})
export class App {
  categories = [{title: 'Food', selected: false}, {title: 'Cars', selected: true}, {title: 'Shopping', selected: false}];

  getSelectedCategories() {
    const selected = this.categories.filter(c => c.selected);
  }
  
}

But we need a solution for reactive forms. This is a basic functionality that exists in every app today.

[ArielGueta]

I don't want to include the FormsModule only for this use case. I want to be able to work with reactive forms in every case that can be solved with template driven.

[red-0ne]

You can easily extend the FormControl class to add any data you need
see http://plnkr.co/edit/wiOKyhE5EKAA5hh85T1u?p=preview

[ArielGueta]

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.

[red-0ne]

I don't understand what you mean by

which object is connected to this true/false value

You can access the value of each "control" through control.value attribute

[ArielGueta]

I can't get results like the model driven example:

 categories = [{title: 'Food', selected: false}, {title: 'Cars', selected: true}, {title: 'Shopping', selected: false}];

  getSelectedCategories() {
    const selected = this.categories.filter(c => c.selected);
  }

In your plunker I can't set a real object as my model ( value ), only true or false.

[ArielGueta]

This is how I can do what I mean with your solution:

class SuperFormControl extends FormControl {
  constructor(value: any, data, syncVtors: any, asyncVtors: any) {
    super(value, syncVtors, asyncVtors);
  }
}

@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">
          <label>{{control.data.label}}</label>
        </div>
      </div>
     </form>
     
    <div>{{checkboxGroup.value | json}}</div>
    
  `,
})
export class App {

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

    this.foodArray = new FormArray(
      [
        new SuperFormControl(true, {label: "fish", id: 1}),
        new SuperFormControl(false, {label: "food", id: 2})
      ]
    );
    
    this.checkboxGroup = _fb.group({
      food: this.foodArray
    });
    this.getSelectedFood();
    
  }
  
  getSelectedFood() {
    const selected = this.foodArray.controls.filter(c => c.value).map(c => c.data);
  }
}

[ArielGueta]

That's works, but it feels "hacky."

When I have an array like this:

const fruits = [
    { name: 'apple',  selected: true, id: 1 },
    { name: 'orange',  selected: false, id: 2 },
]

I just want to be able to turn this model into a list of checkboxes and to know which object is selected.
In Angular js that's was straightforward like I showed in the example above but now with reactive forms it's not.