CODEWITHSUNDEEP
angularangular-reactive-forms
dave0688
dave0688

Reputation: 5770

Reactive forms: Radio button selects both

I have a reactive form with Radio buttons. That radio buttons look like this:

  <label [for]="question.id + '_' + selectableValue.id"
    *ngFor="let selectableValue of selectableValues">
    <input
      type="radio"
      [id]="question.id + '_' + selectableValue.id"
      [value]="selectableValue.id"
      [formControl]="formControlToUse"
      [formControlName]="question.id"
      name="{{ question.id }}"
      (change)="execChange($event)"
    >
    {{selectableValue.displayName}}
  </label>

all variables are existing and are correctly resolved. question.id is unique per Question (one question consists of several radios (= sleectable values).

However, when I click a radio button, the other one is not getting unchecked-> Both are selected. BUT: The name is the same among the radios.

Can anyone help me out please?

@Update: Please see the generated DOM here. Here you can see that the names are basically the same. Still, both checkboxes can be selected for some strange reason...

enter image description here

Upvotes: 3

Views: 3939

Answers (3)

Jared Hensley
Jared Hensley

Reputation: 61

for some crazy reason, using [attr.name] resolves this issue. You need both [attr.name] and [formControlName] bound to the same value. Perhaps this is another, more elegant solution, but I have not found it.

This is very late but hopefully this can help someone else who stumbles upon this problem.

Upvotes: 0

Ashu
Ashu

Reputation: 181

I was facing similar issue. What I was missing was the Name property in the radio buttons. Both the Radio buttons should have Name property and Name should be same for both the radio button.

Below is my Example:

component.html

      <div class="col-md-8 form-group">
    <div class="radio">
      <label>
        <input class="form-control"
               id="rdoNew"
               type="radio"
               name="newOrUsed1"
               formControlName="newOrUsed" value="new" />
        New
      </label>
    </div>
    <div>
      <label>
        <input class="form-control"
               id="rdoUsed"
               type="radio"
               name="newOrUsed1"
               formControlName="newOrUsed" value="used" />
        Used
      </label>
    </div>
  </div>

Component.ts

export class AutoloanComponent implements OnInit {

loanInfoGroup: FormGroup;

constructor() { }

ngOnInit() { this.loanInfoGroup = new FormGroup({

  `newOrUsed: new FormControl(),`

});

}

}

Upvotes: 0

Alexandre Annic
Alexandre Annic

Reputation: 10738

You must give the same formControlName to your group of radio. You can remove name attribute since you use formControlName.

Complete example:

@Component({
    selector: 'app',
    template: `
        <div [formGroup]="form">
            <div *ngFor="let question of questions">
                <label [for]="question.id + '_' + selectableValue.id" *ngFor="let selectableValue of selectableValues">
                    <input type="radio"
                           [id]="question.id + '_' + selectableValue.id"
                           [value]="selectableValue.id"
                           [formControlName]="question.id">
                    {{selectableValue.displayName}}
                </label>
            </div>
        </div>
    `,
})
export class AppCp {
    form: FormGroup;
    questions = [{id: 'id1'}, {id: 'id2'}];
    selectableValues = [
        {id: 1, displayName: 'first'},
        {id: 2, displayName: 'second'}
    ];

    constructor(fb: FormBuilder) {
        let group = {};
        this.questions.forEach(q => group[q.id] = '');
        this.form = fb.group(group);
    }
}

Result

enter image description here

Upvotes: 3

Related Questions