CODEWITHSUNDEEP
htmlangularradio-buttonradio-group
Radix
Radix

Reputation: 69

Naming dynamically created radio button groups with Angular2

I'd like to preface this question by noting that I am relatively new to web development and Angular2.

I have an Angular2 component whose function is to create a tree view on a webpage using the angular-tree-component library (https://angular2-tree.readme.io). For each node in the tree, I have defined a popover HTML template (from ng2-bootstrap) with radio buttons in it.

Since the tree can be of any size, the radio buttons are created dynamically in the popover using a template declared in the tree component HTML.

My issue is that the radio button groups are linked together, as if they were all a single group. I have tried several different ways of naming the button groups dynamically (ideally they would all be separate groups), but nothing seems to work.

Example code:

<div class="testTree">
<Tree #tree id="tree1" [nodes]="nodes">
    <template #treeNodeTemplate let-node="node" let-index="index">
        <span>{{ node.data.name }}</span>

        <template #popTemplate>
            <div class="popDiv">
                Name: {{node.data.name}}<br>
                id: {{node.data.id}}<br>
            </div>          
        <div [innerHtml]="html"></div></template>

        <template #incTemplate>
            <div class="popDiv">

                <input type="radio" attr.name="node.data.id"
                value="ab" (change)="foo(node, $event.target.value)"> Button1<br>

                <input type="radio" attr.name="node.data.id" 
                value="bc" (change)="foo(node, $event.target.value)"> Button2<br>

                <input type="radio" attr.name="node.data.id"
                value="cd" (change)="foo(node, $event.target.value)"> Button3<br>

                <input type="radio" attr.name="node.data.id"
                value="de" (change)="foo(node, $event.target.value)"> Button4<br><br>
                <button (click)="bar(node)">ok</button>

            </div>          
        <div [innerHtml]="html"></div></template>

        <button class="nodeButton" *ngIf="node.isActive || node.isFocused"
        [popover]="popTemplate" placement="right" triggers="" popoverTitle="title1" #pop="bs-popover" (click)="pop.toggle()">Details</button>

        <button class="nodeButton" *ngIf="node.isActive || node.isFocused" 
        [popover]="incTemplate" placement="right" triggers="" popoverTitle="title2" #pop2="bs-popover" (click)="pop2.toggle()">Options</button>


    </template>
</Tree>
</div>

I have tried to name the button groups in the #incTemplate in the following ways: 

name = "node.data.id"
name = "{{node.data.id}}"
[attr.name] = "node.data.id"
attr.name = "{{node.data.id}}"
attr.name = "node.data.id"

To see what was happening, I gave the radio buttons an id and selected it in the angular2 class to log the name value. The name was either blank or the literal string "node.data.id".

I would use ngModel, but since there could be a large number of radio button groups I can't have them using the same variables.

Each tree node has two variables ('id' and 'name') which are unique to each node and could be used to name the radio buttons. However, I can't seem to get the name field of the button to resolve any of the expressions and take the value of the data field provided by the tree node.

How can I get the radio button groups named dynamically so that they are separate from each other?

Upvotes: 0

Views: 1082

Answers (2)

Radix
Radix

Reputation: 69

It turns out I had included (ngModel) and id fields in the radio buttons' definitions. Removing these fields allowed the radio buttons to function as intended despite the dynamically created groups sharing the same name.

Upvotes: 1

Jorawar Singh
Jorawar Singh

Reputation: 7621

Try this approach 

<div *ngFor="let location of locations">
   <input 
   [attr.id]="location"
   type="radio"
   name="location"
   ngModel
   [value]="location">
   <label [attr.for]="location">{{location}}</label>
</div>

Note this is just a example demonstrating how it works you have to adjust your code according to your requirements

Upvotes: 0

Related Questions