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

Question

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

我的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 中我看到旧的选择仍然显示。

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

Answer 1

不确定这是否正确。但是我发现让它与反应形式一起工作的唯一方法是：

将 formControlName 移动到单个 ion-radio 元素：

     <ion-radio-group (ionSelect)="Selected($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" formContolName="radio" [checked]="radio.value==='true'"></ion-radio>
     </ion-item>
     <ion-item lines="none">
         <ion-label>No</ion-label>
        <ion-radio slot="start" value="false" formContolName="radio" [checked]="radio.value==='false'"></ion-radio>
      </ion-item>
    </ion-radio-group>

然后添加一个[checked] 属性，这样当表单被重置时(this.Form.reset()) radio formControl 的值被设置为''。因此 none 的 [checked] 条件被满足并且 UI 实际上被重置。

Answer 2

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

它也会重置单选按钮 model/formcontrol。
竖起大拇指！

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

Ionic 4 Reactive Forms clear ion radio group selection

ionic4

angular7