时间戳

首页 > 解决方案 > Ionic 4 Reactive Forms 清除离子无线电组选择

angular7 - Ionic 4 Reactive Forms 清除离子无线电组选择

问题描述

我正在尝试清除ion-radio-groupIonic 4 中的选择。

我的html：

                        <ion-radio-group formContolName="oilPanStatus" (ionSelect)="OilPanStatusChanged($event)">
                            <ion-list-header>
                                <ion-label>Is the oil-pan status good?</ion-label>
                            </ion-list-header>
                            <ion-item lines="none">
                                <ion-label>Yes</ion-label>
                                <ion-radio slot="start" value="true"></ion-radio>
                            </ion-item>
                            <ion-item lines="none">
                                <ion-label>No</ion-label>
                                <ion-radio slot="start" value="false"></ion-radio>
                            </ion-item>
                        </ion-radio-group>

这是我在 .ts 中清除的尝试：

        this.Form.reset();
        this.Form.controls.oilPanStatus.reset();

我看到它Form已正确重置，所有值和错误都已清除。但在 UI 中，我看到旧的选择仍然显示。

如何清除以前选择的单选按钮。

标签： angular7ionic4

解决方案

IONIC 5 的解决方案：

i) 定义无线电组参考。
ii) 添加带有单选组的点击事件。

工作示例：
模板代码

<ion-radio-group formControlName="future_studies" #refRadio
    (click)="resetRadioGroup(refRadio, $event.target.value, form.controls.future_studies)">
    <ion-list-header>
      <ion-label>My studies</ion-label>
    </ion-list-header>
    <div class="radio-group">
      <ion-item>
        <ion-label>Yes</ion-label>
        <ion-radio slot="start" value="yes"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>No</ion-label>
        <ion-radio slot="start" value="no"></ion-radio>
      </ion-item>
    </div>
  </ion-radio-group>

点击事件处理函数： 

resetRadioGroup(ref, eventVal, control) {
    if (eventVal === ref.value) {
        setTimeout(() => {
            ref.value = null;
            control.reset();
        }, 100);
    }
}

它也会重置单选按钮以及模型/表单控件。
竖起大拇指！

推荐阅读