离子4反应形式清除离子无线电基团选择

Question

我正在尝试清除离子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已正确重置，所有值和错误均已清除。但是在用户界面中，我仍然看到旧的选择。

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

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的值设置为''。因此，无法满足[已检查]的条件，并且实际上不会重置UI。