CODEWITHSUNDEEP
typescriptionic-frameworkionic4
Jordan Quiroz
Jordan Quiroz

Reputation: 95

ionic 4 - get ion-toggle value as text input and turn off all others switch when select one option

I need help to accomplish a form where you can select four different options with ion toggle in levels of danger, and i need to get the value of the switch depending the option as string and then turn off all other options when I select one of them.

I can get the value as boolean but i dont know how to get the input value.

My code is:

HTML

<form [formGroup]="pasoUno" text-center>

    <h3>NIVEL DE RIESGO</h3>
    <h4>¿Cómo lo evalúas?</h4>
    <div class="container">
        <ion-list lines="none">
            <ion-item>
                <ion-label>CRÍTICO</ion-label>
                <ion-toggle slot="start" color="danger" name="nivelRiesgo" formControlName="nivelRiesgo"><input type="hidden" name="nivelRiesgo" value="CRÍTICO"></ion-toggle>
            </ion-item>
            <ion-item>
                <ion-label>ALTO</ion-label>
                <ion-toggle slot="start" color="warning" name="nivelRiesgo"><input type="hidden" name="nivelRiesgo" name="nivelRiesgo" value="ALTO"></ion-toggle>
            </ion-item>
            <ion-item>
                <ion-label>MEDIO</ion-label>
                <ion-toggle slot="start" color="tertiary" name="nivelRiesgo"><input type="hidden" name="nivelRiesgo" name="nivelRiesgo" value="MEDIO"></ion-toggle>
            </ion-item>
            <ion-item>
                <ion-label>BAJO</ion-label>
                <ion-toggle slot="start" color="success" name="nivelRiesgo"><input type="hidden" name="nivelRiesgo" name="nivelRiesgo" value="BAJO"></ion-toggle>
            </ion-item>
            <ion-button fill="clear" (click)="getData()">
                Enviar
            </ion-button>
        </ion-list>
    </div>
</form>

TS:

 ngOnInit() {
     this.pasoUno = this._formBuilder.group({
         nivelRiesgo: ['', Validators.required]
     });

     getData(){
     console.log(this.pasoUno.value)
 }

The idea is if you turn on the value "ALTO" all other switch "CRÍTICO,MEDIO,BAJO" will be disabled and then you get the value "ALTO" to submit in the form.

But I can't make it works, I saw the example in the ionic docs.

Any advice?

thanks in advance

Upvotes: 1

Views: 2686

Answers (2)

rtpHarry
rtpHarry

Reputation: 13125

You would be better off using the ion-radio and ion-radio-group components to solve your problem.

The toggle is for managing a single option. Users already know what they expect when they see this, so fighting against user expectation is not a good development practice.

Also if they want to select a new option they would have to come back, unselect the current option and then select a new one. I don't think this would be obvious to users.

ion-radio - Ionic Documentation

You can style it nicely:

enter image description here

And it works how you want, out of the box:

<ion-list>
  <ion-radio-group>
    <ion-list-header>
      <ion-label>Name</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Biff</ion-label>
      <ion-radio slot="start" value="biff" checked></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Griff</ion-label>
      <ion-radio slot="start" value="griff"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Buford</ion-label>
      <ion-radio slot="start" value="buford"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

Upvotes: 1

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

Here is working example for you 

<ion-list radio-group [(ngModel)]="selectDanger">

    <ion-list-header>
        Danger Levels
    </ion-list-header>

    <ion-item>
        <ion-label>Min</ion-label>
        <ion-radio value="min"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Max</ion-label>
        <ion-radio value="max"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>XMax</ion-label>
        <ion-radio value="xmax"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>XXLMax</ion-label>
        <ion-radio value="xxlmax"></ion-radio>
    </ion-item>

</ion-list>

Upvotes: 1

Related Questions