Using Radio buttons in angular2 Control Array

Question

Hello I have a control array which consists of control group, and the looping the control array in the template to create radio buttons. I am able to select all the radio buttons eventhough they belong to the different control group and has different name for them...I have made a plunker demo here http://plnkr.co/edit/jTMZUCj5JVFazlZo7e4W?p=preview (the plunker demo is in beta 9) ... When i remove the [ngFormControl] it works perfectly... can somebody please tell me the correct way to implement that?

  ArrayData=['abhi','rahul'];

ArrayControl=new ControlArray([]);

constructor(fb: FormBuilder) {  

this.ArrayControl=new ControlArray([]);

for(var i=0;i<this.ArrayData.length;i++){
  let myForm = fb.group({
  'Male':  ['', Validators.required]  ,
  'Female':  ['', Validators.required]
}); 

  this.ArrayControl.push(myForm);
}

}

This is how i am creating the control array...

        <div *ngFor="#control of ArrayControl.controls;#i=index">
      <input type="radio" name="{{i}}" value="male" [ngFormControl]="control.controls['Male']"> Male<br>
      <input type="radio" name="{{i}}" value="female" [ngFormControl]="control.controls['Female']"> Female<br>
      <hr>
    </div>

In this way i am looping the template... Can somebody please tell me where i am doing wrong?

Does it need to be the old forms module or is the new forms module fine as well? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 26, 2016 at 12:29
@GunterZochbauer does the above requirement works fine if i implement them using new forms(RC-4)? — abhilash reddy
– abhilash reddy, Commented Jul 26, 2016 at 12:37

Günter Zöchbauer · Accepted Answer · 2017-06-05 19:51:15Z

4

update

Not applicable to the final Angular 2 release.

original

This might be what you're looking for:

@Component({
  selector: 'my-app',
  directives: [REACTIVE_FORM_DIRECTIVES],    
  template: `
<div class="ui raised segment"> 
  <h3>Select Gender</h3>
  <form [formGroup]="form">
    <div formArrayName="arr">
      <div *ngFor="let item of arrayData; let i=index">
        <div>{{item}}</div>
        <input type="radio" [formControlName]="i" value="male"> Male<br>
        <input type="radio" [formControlName]="i" value="female"> Female<br>
        <hr>
      </div>
    </div>
  </form>
  <div>data: {{form.value | json}}</div>
</div>  

  `
})
export class AppComponent { 
  arrayData=['abhi','rahul'];

  //gender = new FormControl('', [Validators.required]);
  arr = new FormArray([]);

  constructor() {  
    this.form=new FormGroup({ 'arr': this.arr });
    console.log(this.form);
    for(var i=0; i < this.arrayData.length; i++){
      this.arr.push(new FormControl('', [Validators.required]));
    } 
  }
}

Plunker example

edited Jun 5, 2017 at 19:51

answered Jul 26, 2016 at 13:15

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rick O'Shea Over a year ago

Where's the binding? Adding radio buttons has always worked. It's kind of an odd thing to use an index (i) as the "name" of a radio button property and where would use set the gender based on existing data? You're setting it to a completely invalid value and forcing the user to click something''

Günter Zöchbauer Over a year ago

@RickO'Shea There was a new forms module introduced since and wrote this answer. Radio buttons weren't supported well before that. I haven't used radio buttons since a long time and don't know by heart how to use them. There should be several other answers out that demonstrate it.

Collectives™ on Stack Overflow

Using Radio buttons in angular2 Control Array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related