ionic 4 - 获取 ion-toggle 值作为文本输入并在 select 一个选项时关闭所有其他开关

Question

我需要帮助来完成一个表单，您可以在其中 select 四个不同的选项，离子切换危险级别，我需要根据选项获取开关的值作为字符串，然后关闭当我 select 其中之一时所有其他选项。

我可以获取布尔值，但我不知道如何获取输入值。

我的代码是：

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)
 }

这个想法是，如果您打开值 "ALTO"，所有其他开关 "CRÍTICO,MEDIO,BAJO" 将被禁用，然后您将获得值 "ALTO" 以在表单中提交。

但我无法让它工作，我在 ionic 文档中看到了示例。

有什么建议吗？

提前致谢

Answer 1

您最好使用 ion-radio 和 ion-radio-group 组件来解决您的问题。

开关用于管理单个选项。用户在看到这些时已经知道他们期望什么，因此与用户期望作斗争并不是一个好的开发实践。

此外，如果他们想要 select 一个新选项，他们将不得不返回，取消 select 当前选项，然后 select 一个新选项。我不认为这对用户来说是显而易见的。

ion-radio - Ionic Documentation

你可以很好地设计它：

开箱即用，随心所欲：

<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>

Answer 2

这是为你工作example

<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>

ionic 4 - 获取 ion-toggle 值作为文本输入并在 select 一个选项时关闭所有其他开关

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

typescript

ionic-framework

ionic4