How do I determine which radio button is currently selected within my Angular2 application?

Question

How do I determine which radio button is currently selected within my Angular2 application?

In my HTML, I have the following radio buttons:

<div class="col-lg-4" id="radioButtons"> 
    <form action="">
        <fieldset id="capacity">
            <legend>capacity</legend>
            <label for="input-ao"><input size=25 id="input-ao" type="radio" name="capacity" [value]="0-30" checked="checked" />0-30</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="30-60"/>30-60</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="60-100"/>60-100</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="100"/>100+</label>
            <br>
        </fieldset>
        <fieldset id="computerFieldset">
            <legend>computer</legend>
            <label for="input-ao"><input size=25 id="input-ao" type="radio" name="comp" value="yes" checked="checked" />yes</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="comp" value="no"/>no</label>
            <br>
        </fieldset>
    </form>
</div>

I would like to retrieve the selected radio button and inquire whether having a default checked="checked" value could potentially pose an issue. Thank you.

javascript html css angular binding

Answer 1

Answer №1

To ensure functionality, remember to include

[(ngModel)]="YourVariableFromTsCodeBehindFile"

within each radio button in your group.

Your code should resemble the following setup:

<div class="col-lg-4" id="radioButtons"> 
  <form action="">
    <fieldset id="capacity">
      <legend>capacity</legend>
      <label for="input-ao"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" size=25 type="radio" name="capacity" value="0-30" checked="checked" />0-30</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="30-60"/>30-60</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="60-100"/>60-100</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="100"/>100+</label>
      <br>
      {{selectedRed}}
    </fieldset>

    <fieldset id="computerFieldset">
      <legend>computer</legend>
      <label for="input-ao"><input size=25 [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="yes" checked="checked" />yes</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="no"/>no</label>

      <br>
    {{blue.id}}   
    </fieldset>  
  </form>
</div>

Check out the live demonstration here: https://stackblitz.com/edit/angular-material-radio-button-demo-ksrxbc?file=app/app.component.html

Answer 2

To ensure functionality, remember to include

[(ngModel)]="YourVariableFromTsCodeBehindFile"

within each radio button in your group.

Your code should resemble the following setup:

<div class="col-lg-4" id="radioButtons"> 
  <form action="">
    <fieldset id="capacity">
      <legend>capacity</legend>
      <label for="input-ao"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" size=25 type="radio" name="capacity" value="0-30" checked="checked" />0-30</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="30-60"/>30-60</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="60-100"/>60-100</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="100"/>100+</label>
      <br>
      {{selectedRed}}
    </fieldset>

    <fieldset id="computerFieldset">
      <legend>computer</legend>
      <label for="input-ao"><input size=25 [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="yes" checked="checked" />yes</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="no"/>no</label>

      <br>
    {{blue.id}}   
    </fieldset>  
  </form>
</div>

Check out the live demonstration here: https://stackblitz.com/edit/angular-material-radio-button-demo-ksrxbc?file=app/app.component.html

Answer 3

Answer №2

If you're looking to implement a changeHandler method, take a look at this demonstration in the following video: https://www.youtube.com/watch?v=PWJemG916uI

Here is an example:

<label for="input-xyz"><input size=25 id="input-xyz" type="radio" name="selection" [value]="31-60" checked="checked" (change)="handleRadioChange($event)" />31-60</label>

handleRadioChange(event: any){
    this.updatedSelection = event.target.value;
}

Answer 4

If you're looking to implement a changeHandler method, take a look at this demonstration in the following video: https://www.youtube.com/watch?v=PWJemG916uI

Here is an example:

<label for="input-xyz"><input size=25 id="input-xyz" type="radio" name="selection" [value]="31-60" checked="checked" (change)="handleRadioChange($event)" />31-60</label>

handleRadioChange(event: any){
    this.updatedSelection = event.target.value;
}

Answer 5

Answer №3

If you create a function named radioSelection() and include code to display the value of the chosen radio input, it can be helpful.

radioUpdate(event: any){console.log(event.target.value)}

This is just a suggestion since I am currently without access to my computer.. If you need further clarification on the concept, feel free to ask and I will revise the response accordingly.

Answer 6

If you create a function named radioSelection() and include code to display the value of the chosen radio input, it can be helpful.

radioUpdate(event: any){console.log(event.target.value)}

This is just a suggestion since I am currently without access to my computer.. If you need further clarification on the concept, feel free to ask and I will revise the response accordingly.

How do I determine which radio button is currently selected within my Angular2 application?

Answer №1

Answer №2

Answer №3

Similar questions

Unlocking the potential of Object[value] in JavaScript/jQuery: A guide to extracting its value

Retrieve various URLs within an object using React

Tips for hiding a sidebar by clicking away from it in JavaScript

The android webview is having trouble loading HTML that includes javascript

Interacting between my React Native client and server.js

The HTML button fails to respond when clicked

What is the best way to transfer data from a custom method and use it in another method within my constructor function in Javascript?

Images in Android webview disappearing after first load

Serve unique data to different bots and human visitors using express.js and node.js

What is the best way to convert modal window functionality from jQuery to native Javascript?

Utilize the npm module directly in your codebase

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Storing and sharing information between routes in Angular 2: The ultimate guide

Tips for positioning a JQuery drop-down correctly

Encountering an issue while upgrading to Angular 10: Unable to interpret "tsconfig.json" as a valid JSON AST Object

How to leverage tsconfig paths in Angular libraries?

What is the most effective way to prevent JavaScript from running during page load or when the document is ready

Divide and conquer- Lighttpd's mod_wstunnel combines separate messages by using UNIX socket communication to the backend server

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

What is the best way to avoid having identical entries in a row when using jQuery's multiple select feature?