代码之家 › 专栏 › 技术社区 › Tonye Boro

提交到数据库时,单选按钮仅选择Ionic中的第一个值

ionic3 ionic-framework html

Tonye Boro · 技术社区 · 6 年前

我有一组单选按钮:

<ion-list radio-group >
<ion-list-header>
Location
</ion-list-header>

<ion-item>
<ion-label>Rural</ion-label>
<ion-radio value="rural" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Urban</ion-label>
<ion-radio value="urban" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Other</ion-label>
<ion-radio value="other" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

</ion-list>

问题是如果我选择其他这是第三个单选按钮, 农村将是第一个提交的。

而且,所有单选按钮都会出现这种情况。只有第一个被提交。

我用过 @ViewChild("schloc")schloc; 保持单选按钮的值。

2 回复 | 直到 6 年前

Preeti Jolapra 6 年前

您可以使用以下代码:


   schloc: any

//定义

  <ion-list radio-group [(ngModel)]="schloc">
    <ion-list-header>
      Location
    </ion-list-header>

    <ion-item>
      <ion-label>Rural</ion-label>
      <ion-radio value="rural"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Urban</ion-label>
      <ion-radio value="urban"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Other</ion-label>
      <ion-radio value="other"></ion-radio>
    </ion-item>
  </ion-list>

提交数据时,请使用 this.schloc

TheLebDev 6 年前

我建议使用 FormControl 所以你的代码看起来像

<ion-list radio-group formControlName="yourFormControl">
<ion-list-header>
Location
</ion-list-header>

<ion-item>
<ion-label>Rural</ion-label>
<ion-radio value="rural" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Urban</ion-label>
<ion-radio value="urban" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Other</ion-label>
<ion-radio value="other" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

</ion-list>

然后在你的 TS 文件: valueToSubmit = yourFormGroup.get('formControlName').value