CODEWITHSUNDEEP
angularradio-buttonionic3
ItsMyLife
ItsMyLife

Reputation: 478

Check which of radio checked ionic 3

I have simple 2 checkboxes

<input class="checkbox" [(ngModel)]="myRadio" type="radio" value="pin" name="autoriz">
<input class="checkbox" [(ngModel)]="myRadio1" type="radio" value="mnemonic" name="autoriz">
<button class="btn btn-unactive" (click)="goToMain()">
        Continue
      </button>

How i can check which of them is checked?

public goToMain() {
    if(this.myRadio.target.checked){
      alert(this.myRadio.getAttribute('value'));
    }else if(this.myRadio1.target.checked){
      alert(this.myRadio1.getAttribute('value'));
    }
  }

But i got an error that this.myRadio.target.checked not defined

Upvotes: 1

Views: 4916

Answers (2)

Steven Scott
Steven Scott

Reputation: 11250

Use a RadioGroup and then check the value. Ionic Documentation for Radio Button

page.ts

import { Component } from '@angular/core';

import {
  FormGroup,
  FormControl

} from '@angular/forms';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  langs;
  langForm;

  constructor() {
    this.langForm = new FormGroup({
      "langs": new FormControl({value: 'rust', disabled: false})
    });
  }

  doSubmit(event) {
    console.log('Submitting form', this.langForm.value);
    event.preventDefault();
  }
}

template.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Radios
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <form (submit)="doSubmit($event)" [formGroup]="langForm">
    <ion-list radio-group formControlName="langs">

      <ion-list-header>
        Language
      </ion-list-header>

      <ion-item>
        <ion-label>Go</ion-label>
        <ion-radio value="golang" checked="true"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Rust</ion-label>
        <ion-radio value="rust"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Python</ion-label>
        <ion-radio value="python"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Ruby</ion-label>
        <ion-radio value="ruby"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Clojure</ion-label>
        <ion-radio value="clojure"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Java</ion-label>
        <ion-radio value="java"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>PHP</ion-label>
        <ion-radio value="php"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>.NET</ion-label>
        <ion-radio value="dotnet"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>C++</ion-label>
        <ion-radio value="cplusplus"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Scala</ion-label>
        <ion-radio value="scala"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Haskell</ion-label>
        <ion-radio value="haskell"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Erlang</ion-label>
        <ion-radio value="erlang"></ion-radio>
      </ion-item>
    </ion-list>
  </form>

</ion-content>

Upvotes: 1

Ivan
Ivan

Reputation: 32

try this:

Html:

<md-checkbox [(ngModel)]="radio1" name="radio1" id="radio1">Radio1</md-checkbox>

Ts:

 if(this.radio1){
      ...
    }

Upvotes: 2

Related Questions