javascript - Angular template reference variable for radio buttons - Stack Overflow

admin管理员组

文章数量:1309921

I know about this:

<input type="text" #inp>
<button type="button" (click)="onClick(inp.value)">Click</button>

So I get the value I typed into textbox without having to use ngModel directive.

Is there any similar approach to work with radio buttons without having to use ngModel?

<input type="radio" value="selected" name="viewType">Selected
<input type="radio" value="unselected" name="viewType">Unselected
<input type="radio" value="both" name="viewType">Both

Below these radio buttons I have a refresh button like this:

<button (click)="refreshView()">Refresh</button>

These html input elements aren't part of any form tag. What I want is to have a "refreshView" function call with a parameter - the selected radio button value.

Is this possible?

I know about this:

<input type="text" #inp>
<button type="button" (click)="onClick(inp.value)">Click</button>

So I get the value I typed into textbox without having to use ngModel directive.

Is there any similar approach to work with radio buttons without having to use ngModel?

<input type="radio" value="selected" name="viewType">Selected
<input type="radio" value="unselected" name="viewType">Unselected
<input type="radio" value="both" name="viewType">Both

Below these radio buttons I have a refresh button like this:

<button (click)="refreshView()">Refresh</button>

These html input elements aren't part of any form tag. What I want is to have a "refreshView" function call with a parameter - the selected radio button value.

Is this possible?

• javascript
• angular

Share Improve this question Follow asked Feb 24, 2019 at 20:37 robertrobert 6,15277 gold badges3131 silver badges4040 bronze badges 2

• It can probably be done but it would be easier with ngModel. Is there a reason for not using it? – Martin Parenteau Commented Feb 24, 2019 at 21:28
• Just to avoid creating an extra variable simply to hold the viewType which is not used anywhere else. "refreshView" function could do all the setup if it can get the correct viewType from the template. – robert Commented Feb 24, 2019 at 21:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

If you have only a few radio buttons, the following syntax would work. It gets the value associated with the radio button that is checked, with the help of nested conditional operators.

<input #rad1 type="radio" value="selected" name="viewType" >Selected
<input #rad2 type="radio" value="unselected" name="viewType" >Unselected
<input #rad3 type="radio" value="both" name="viewType" >Both

<button (click)="refreshView(rad1.checked ? rad1.value : rad2.checked ? rad2.value : rad3.checked ? rad3.value : null)">Refresh</button>

See this stackblitz for a demo.

本文标签： javascriptAngular template reference variable for radio buttonsStack Overflow