CODEWITHSUNDEEP
htmlangularradio-button
Arash
Arash

Reputation: 3688

reusing angular component that contain radio button group

I have two component in my app

app-sample-container and app-radiobutton-form

I want to reuse app-radiobutton-form twice or more in app-sample-container, everything is ok except for radio buttons

radio button state is shared among all app-radiobutton-form instance on app-sample-container

here is app-radiobutton-form HTML 

<div class="form-inline">
    <div class="form-group">
      <label>all items are approved</label>
      <input  [value]="true" type="radio" [ngModel]="isApproved">
    </div>

    <div class="form-group">
        <label>none of items are approved</label>
        <input  [value]="false" type="radio"  [ngModel]="isApproved">
    </div>

  </div>

and here is ts file 

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-radiobutton-form',
  templateUrl: './app-radiobutton-form.html',
  styleUrls: ['./app-radiobutton-form.component.scss']
})
export class RadioButtonFormComponent implements OnInit {
  isApproved: Boolean = null;
  constructor() { }
  ngOnInit() {
  }
}

and below is app-sample-container HTML 

<app-radiobutton-form #form1></app-radiobutton-form>
<app-radiobutton-form #form2></app-radiobutton-form>

when I click radio button on form1 , radio button on form2 also change .

i cant find a simple way to unique radio group button base on an instance of app-radiobutton-form.

any solution?

note: the question is simplified.

Upvotes: 2

Views: 3541

Answers (2)

Arash
Arash

Reputation: 3688

the solution is to add form to app-radiobutton-form html markup 

<form class="form-inline">
  <div class="form-group">
    <label>all items are approved</label>
    <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="true">
  </div>

  <div class="form-group">
      <label>none of items are approved</label>
      <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="false">
  </div>
  <div class="form-group">
    <label>Your bool is </label>
    {{isApproved}}
  </div>
</div>
</form>

so now every radio button group is treated separately.

Upvotes: 2

jmbmage
jmbmage

Reputation: 2547

My first feeling: It's not an Angular problem. The problem is how HTML treats Radio buttons, it can't tell the difference between the radio buttons once they are rendered on the page.

You can prove this by adding a line to app-radiobutton-form.html

<label>Your bool is </label>{{isApproved}}

The Angular 2 values are unique, you need to set a unique name and ID for the html rendered radio buttons.

I modified the app-radiobutton-form.html to be assigning a unique name and id for the radio button controls:

<div class="form-inline">
  <div class="form-group">
    <label>all items are approved</label>
    <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="true">
  </div>

  <div class="form-group">
      <label>none of items are approved</label>
      <input attr.name={{uid}} attr.id={{uid}} type="radio" [(ngModel)]="isApproved" [value]="false">
  </div>
  <div class="form-group">
    <label>Your bool is </label>
    {{isApproved}}
  </div>
</div>

And the .ts file to create unique ids for the radio button groups:

import { Component, OnInit, Input } from '@angular/core';

var uniqueRadioButtonId = 1;

@Component({
  selector: 'app-radio-button',
  templateUrl: './radiobutton.component.html',
  styleUrls: ['./radiobutton.component.css']
})
export class RadioButtonComponent implements OnInit {

  @Input() isApproved: Boolean;
  uid:string;

  constructor()
  { 
    this.uid = "radioBtn" + (uniqueRadioButtonId++);
  }

  ngOnInit() {}
}

The radio buttons are assigning unique boolean values in the component, but they are not performing as unique radio buttons in the UI, even with a name and id attributes set uniquely!

At this point I would say abandon the radio button control and use stylized <input type="checkbox"> instead.

Upvotes: 0

Related Questions