Radio button in reactive form doesnt bind from typescript side

[Dimitrije Prosevski]

<ejs-radiobutton formControlName="isCorrect" label="Correct"><ejs-radiobutton>

this.form.get("isCorrect").setValue("true");

When i console log the form values, it changed successfully but on the browser side it is still unchecked.

[Aravinthan Seetharaman]

Hi Dimitrije, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We suspect that this issue has been occurred due to not giving RadioButton value as the parameter in setValue() method of form. We suggest you please use the value of desired RadioButton in setValue() method. Please refer the below code snippet and sample. 

 

app.componenet.html 

 

<form [formGroup]="myForm" (ngSubmit)="submitForm()"> 

  <div> 

    <ejs-radiobutton 

      formControlName="options" 

      name="options" 

      label="Native" 

      value="Native" 

    ></ejs-radiobutton> 

    <ejs-radiobutton 

      formControlName="options" 

      name="options" 

      label="LDAP" 

      value="LDAP" 

      style="padding-left: 15px;" 

    > 

    </ejs-radiobutton> 

    <ejs-radiobutton 

      formControlName="options" 

      name="options" 

      label="SSO" 

      value="SSO" 

      style="padding-left: 15px;" 

    ></ejs-radiobutton> 

  </div> 

  <br /> 

  <br /> 

  <br /> 

  <button ejs-button type="button" (click)="setValue()">Set Value</button> 

  <button ejs-button type="submit">Submit</button> 

</form> 

 

 

app.component.ts 

 

export class AppComponent { 

  isSubmitted = false; 

  constructor() {} 

  myForm: FormGroup; 

  isFormSubmitted = false; 

 

  ngOnInit() { 

    this.myForm = new FormGroup({ 

      options: new FormControl('Native'), 

    }); 

  } 

  submitForm() { 

    this.isFormSubmitted = true; 

    if (this.myForm.value) { 

      console.log(this.myForm.value.options); 

    } 

  } 

  setValue() { 

    this.myForm.get('options').setValue('LDAP'); 

  } 

} 

 

 

Sample: https://stackblitz.com/edit/angular-jkscbx-jx234q?file=app.component.ts  

 

Could you please check the above details and get back to us if you need assistance on this. 

 

Regards, 

Aravinthan S