How to keep only the selected ion-radio value when back to form?


#1

Dear Friends,
I have a 2 step form , in which in first step there is an ion-radio which select and pass a value to next form page. But when I back to first form and click another ion-radio it also selected . But in 2nd page the value get is latest one (No problem in functionality). But when back to first form all previous selected items in selected state . How it can avoid ?

My relevant code is

       <ion-list *ngIf="searchFlag||result?.length > 0">
     
         
                    <ion-item-divider color="light"><h2>{{"Institution List"|translate}}</h2></ion-item-divider>
                   
                    <ion-item text-wrap  *ngFor="let searchdata of result; let i = index">
                       <ion-label>{{searchdata.Column1}}</ion-label>
                       <ion-radio value="{{searchdata.intLBID}}" name="LB" (ionSelect)="setLB(searchdata.intLBID)" ></ion-radio>
                    </ion-item>
                    <ion-item text-wrap  *ngIf="searchFlag && result?.length==null">
                       No such institution found , please try again.
                    </ion-item>        
       
     </ion-list>

Please help

Thanks
Anes


#2

Hi@anespa ,

Did you reset the form1 aftersubmission?
If the form1 submitted successfully please call method form.reset();

#3

Dear @vibinflogesoft,

I tried it like

this.formgroup.reset();

but on that case the above search boxes reset , but no ion-radio content…

my form structure is in template as

<form [formGroup]="formgroup" >
 <ion-list>
   
             
              <ion-item-divider color="light" *ngIf="RegType==1" text-wrap><h2>{{"Birth"|translate}} , {{"Registered Institution"|translate}}</h2></ion-item-divider>
              <ion-item-divider color="light" *ngIf="RegType==2" text-wrap><h2>{{"Death"|translate}} , {{"Registered Institution"|translate}}</h2></ion-item-divider>
              <ion-item-divider color="light" *ngIf="RegType==3" text-wrap><h2>{{"Marriage"|translate}} , {{"Registered Institution"|translate}}</h2></ion-item-divider>
             
 
              <ion-item text-wrap (click)="setRegType(1)">
                 <ion-label style="color:rgb(83, 73, 73);text-align:left ">{{"District"|translate}}</ion-label>
                 <ion-select formControlName="singleSelect" [(ngModel)]="data.singleSelect" (click)="getDistrict()">
                     <ion-option *ngFor="let dis of district" value= {{dis.intDistrictId}} class="color">
                         {{dis.chvNameEng}}                  
             
                       </ion-option>
                 </ion-select>
              </ion-item>
 
              <ion-item text-wrap>
                 <ion-label style="color:rgb(83, 73, 73);text-align:left ">{{"Type"|translate}} </ion-label>
                 <ion-select formControlName="lbTypeSelect" [(ngModel)]="data.lbTypeSelect" (click)="getLBType()">
                     
                       <ion-option *ngFor="let lbt of localbodytype" value= {{lbt.intLBTypeID}} class="color">
                         {{lbt.chvEngLBType}}
                       </ion-option>
                 </ion-select>  
              </ion-item>
              <ion-item text-wrap>
                       
                 <button ion-button block style="height:35px; " [disabled]="!singleSelect.valid||!lbTypeSelect.valid"
                 (click)="getLBList(data.singleSelect,data.lbTypeSelect)" name="btn_selectinstitution" class="btn btn-primary">
                 {{"Choose"|translate}}
                 </button>
              </ion-item>
              <ion-item no-padding style="text-align:center " *ngIf="flgProcessing">                  
               
               <ion-spinner color="primary" text-center name="crescent" *ngIf="flgProcessing">   </ion-spinner>          
             </ion-item>
             
 
      </ion-list>
      <ion-item no-padding style="text-align:center " *ngIf="flgLbSearch">                  
         <img src="assets/icon/processing.gif" width="100" height="100" border="0">              
     </ion-item>
      <ion-list *ngIf="searchFlag||result?.length > 0">
     
         
                    <ion-item-divider color="light"><h2>{{"Institution List"|translate}}</h2></ion-item-divider>
                   
                    <ion-item text-wrap  *ngFor="let searchdata of result; let i = index">
                       <ion-label>{{searchdata.Column1}}</ion-label>
                       <!--<ion-list radio-group> -->
                           <ion-radio value="{{searchdata.intLBID}}" name="LB" (ionSelect)="setLB(searchdata.intLBID)" ></ion-radio>
                       <!--</ion-list> -->
                    </ion-item>
                    <ion-item text-wrap  *ngIf="searchFlag && result?.length==null">
                       No such institution found , please try again.
                    </ion-item>        
       
     </ion-list>
     <br>
     <br>

     
     </form>

Please advise

Anes


#4

can i show your ts code?