Resetting a radio button in angular

[Walter Cook]

I have a pair of radio buttons behaving strangely:

<ejs-radiobutton  type="radio"  id="1" #descRadio label="New Description"  value="new" formControlName="updateTypeRadio"   ></ejs-radiobutton>

 <ejs-radiobutton  type="radio"  id="2" #descRadio label="Add to Description" value="add" formControlName="updateTypeRadio" checked="true" ></ejs-radiobutton>

Defaulted to ‘add’:

@ViewChild('descRadio') public descRadio: RadioButtonComponent;

createForm():void{

   this.ticketForm = this.fb.group({

 

    updateTypeRadio:['add']

       });

 }

On load:

The add button is selected.

console.log(this.descRadio.getSelectedValue()); shows ‘add’

Fine.

If I clear the form

this.ticketForm.reset(); 

console.log(this.descRadio.getSelectedValue()); shows a blank record

It does not reset the button. 

If I issue one or both of these additional commands in any order it does not help.

this.ticketForm.reset(); 

     this.descRadio.value = "add";

     this.ticketForm.controls.updateTypeRadio..setValue["add"];

console.log(this.descRadio.getSelectedValue()); still shows a blank record

How do I reset it then?

Here’s the thing. On another form with the same setup, this command works fine:

this.reportTicketForm.controls.ticketOwnerRadioGroup.setValue("Specific");

I have a couple dozen radio groups and I’ve found these radio buttons to be extraordinarily fussy.

Thanks

[Walter Cook]

For further info, just upgraded to and it still persists:

"@syncfusion/ej2-angular-buttons": "^19.2.47",

    "@syncfusion/ej2-angular-charts": "^19.2.47",

    "@syncfusion/ej2-angular-documenteditor": "^19.2.47",

    "@syncfusion/ej2-angular-dropdowns": "^19.2.47",

    "@syncfusion/ej2-angular-grids": "^19.2.47",

    "@syncfusion/ej2-angular-heatmap": "^19.2.44",

    "@syncfusion/ej2-angular-inputs": "^19.2.46",

    "@syncfusion/ej2-angular-layouts": "^19.2.44",

    "@syncfusion/ej2-angular-navigations": "^19.2.46",

    "@syncfusion/ej2-angular-notifications": "^19.2.44",

    "@syncfusion/ej2-angular-pivotview": "^19.2.46",

    "@syncfusion/ej2-angular-popups": "^19.2.46",

    "@syncfusion/ej2-angular-splitbuttons": "^19.2.44",

    "@syncfusion/ej2-angular-treegrid": "^19.2.47",

    "@syncfusion/ej2-data": "^19.2.44",

    "@syncfusion/ej2-ng-dropdowns": "^16.2.50",

    "@syncfusion/ej2-treegrid": "^19.2.47",

[Aravinthan Seetharaman]

Hi Walter, 

 

Thanks for the patience. 

 

We have checked your reported query. We have prepared a sample based on your suggestion. WE can reset the selected value by using the reset method. Please check the below code snippet. 

 

<form id="enquestaFillForm" [formGroup]="form1"> 

  <div class="control-section"> 

    <div class="radiobutton-control"> 

      <h4>Select a payment method 1: {{form1.controls.question.value}}</h4> 

      <div class="row"> 

        <ejs-radiobutton #radiobutton label="Credit/Debit card" name="payment" value="credit/debit" formControlName="question" > 

        </ejs-radiobutton> 

      </div> 

      <div class="row"> 

        <ejs-radiobutton label="Net Banking" name="payment" value="netbanking" formControlName="question"></ejs-radiobutton> 

      </div> 

      <div class="row"> 

        <ejs-radiobutton label="Cash on Delivery" name="payment" value="cashondelivery" formControlName="question"></ejs-radiobutton> 

      </div> 

      <div class="row"> 

        <ejs-radiobutton label="Other Wallets" name="payment" value="others" formControlName="question"></ejs-radiobutton> 

      </div> 

    </div> 

  </div> 

   <button #toggleBtn ejs-button  [isPrimary]="true" (click)="btnClick()" >Get Selected Value</button> 

    {{this.radioValue}} 

    <br/> 

    <br/> 

    <button #toggleBtn ejs-button  [isPrimary]="true" (click)="deSelect()" >DeSelect</button> 

</form> 

 

 

    btnClick() { 

       this.radioValue = this.radioButton.getSelectedValue(); 

     } 

  deSelect() { 

 

    this.form1.reset(); 

 

} 

For your reference, we have prepared a sample based on your requirement. Please check the below sample. 

 

Sample: https://stackblitz.com/edit/test-radio-button-gy5av7?file=app.component.ts 

 

Please check the above link and get back to us, if you need further assistance. 

 

Regards, 

Aravinthan S