Question

我有这组单选按钮：

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

问题是，如果我选择 Other （第三个单选按钮）并提交，农村将是第一个提交的按钮。

而且，所有单选按钮也会出现这种情况。仅第一个提交。

我使用@ViewChild("schloc")schloc;来保存单选按钮的值。

Answer 1

您可以使用以下代码： 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

Answer 2

我建议为此使用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

提交到数据库时，单选按钮仅选择离子的第一个值

2 个答案: