title: How to set Radio button selected value in Edit form
body: <p>I am creating edit form using ReactiveFormModule. I want to show data in editform like in textbox, dropdown, radiobox and checkbox. I can set value of textbox and dropdown successfully using <code>setValue</code> method. but I can't set value of Radio group using same.</p>
  
  <p><strong>Typescript</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors, FormControlName } from '@angular/forms';
  import { HttpClient } from '@angular/common/http';
  import { Observable, EMPTY, throwError } from 'rxjs';
  import { catchError } from 'rxjs/operators';
  
  @Component({
    selector: 'app-add',
    templateUrl: './add.component.html',
    styleUrls: ['./add.component.css'],
  })
  export class AddComponent implements OnInit {
    stateList : any;
    cityList: any;
    genderList: any;
    hobbyList: any;
    name: FormControl;
    age: FormControl;
    state : FormControl;
    city: FormControl;
    myform: FormGroup;
    gender: FormControl;
    hobby: FormControl;
    file: FormControl;
    email: FormControl;
    confirmEmail: FormControl;
  
    submitted = false;
  
    constructor(private http: HttpClient) {
      this.name = new FormControl("", [Validators.required, Validators.email, Validators.minLength(6), Validators.pattern("")]);
      this.age = new FormControl("27", [checkageValidator]);
      this.state = new FormControl("");
      this.city = new FormControl("", Validators.required);
      this.gender = new FormControl("");
      this.hobby = new FormControl("");
      this.file = new FormControl("");
      this.email = new FormControl("");
      this.confirmEmail = new FormControl("", [compareEmail]);
  
      this.myform = new FormGroup({
        name: this.name,
        age: this.age,
        state : this.state,
        city: this.city,
        gender: this.gender,
        hobby: this.hobby,
        file: this.file,
        email: this.email,
        Cemail: this.confirmEmail
      });
  
      this.stateList = [{value : 1, text: "Gujarat"}, {value : 2, text : "Maharastra"}];
      this.cityList = [{ value: 1, text: "Ahmedabad", stateid: 1 }, { value: 2, text: "Rajkot", stateid: 1 }, { value: 3, text: "Gandhinagar", stateid: 2 }];
      this.genderList = [{ value: 1, text: "Male", selected: "checked" }, { value: 2, text: "Female", selected: "" }];
      this.hobbyList = [{ value: 1, text: "Games", checked:false }, { value: 2, text: "Tracking", checked:false }, { value: 3, text: "Swimming", checked:false }];
    }
  
    ngOnInit() {
      this.myform.controls["name"].setValue("Hardik");
      this.myform.controls["state"].setValue("1");
      this.genderList.find(i=&gt;i.value == 2).selected == "checked";
    }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form novalidate [formGroup]="myform" (ngSubmit)="SubmitData(myform)"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  Name:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;input type="text" id="txtName" formControlName="name" class="form-control" [ngClass]="{'error' : myform.controls.name.errors &amp;&amp; submitted}"&gt;
                  &lt;div *ngIf="submitted &amp;&amp; myform.controls.name.errors"&gt;
                      &lt;span class="alert-danger form-control" *ngIf="myform.controls.name.errors?.required"&gt;Name is required field&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  Email:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;input type="text" id="txtEmail" formControlName="email" class="form-control" [ngClass]="{'error' : myform.controls.email.errors &amp;&amp; submitted}"&gt;
                  &lt;div *ngIf="submitted &amp;&amp; myform.controls.email.errors"&gt;
                      &lt;span class="alert-danger form-control" *ngIf="myform.controls.email.errors?.required"&gt;Email is required field&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  CEmail:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;input type="text" id="txtCEmail" formControlName="Cemail" class="form-control" [ngClass]="{'error' : myform.controls.Cemail.errors &amp;&amp; submitted}"&gt;
                  &lt;div *ngIf="submitted &amp;&amp; myform.controls.Cemail.errors"&gt;
                      &lt;span class="alert-danger form-control" *ngIf="myform.controls.Cemail.errors?.emailMatch"&gt;Email not match&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  Age:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;input type="text" id="txtAge" formControlName="age" class="form-control" [ngClass]="{'error' : myform.controls.name.errors &amp;&amp; submitted}"&gt;
                  &lt;div *ngIf="submitted &amp;&amp; myform.controls.age.errors"&gt;
                      &lt;span class="alert-danger form-control" *ngIf="myform.controls.age.errors?.required"&gt;Age is required field&lt;/span&gt;
                      &lt;span class="alert-danger form-control" *ngIf="myform.controls.age.errors?.validAge"&gt;Age must greater than 18&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  State:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;select class="form-control" formControlName="state" (change)="getCities($event.target.value)"&gt;
                      &lt;option value=""&gt;Select State&lt;/option&gt;        
                      &lt;option *ngFor="let s of stateList" value="{{s.value}}"&gt;{{s.text}}&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div *ngIf="submitted &amp;&amp; myform.controls.state.errors"&gt;
                      &lt;span class="alert-danger form-control" *ngIf="myform.controls.state.errors?.required"&gt;State is Required&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  City:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;select class="form-control" formControlName="city"&gt;
                      &lt;option value=""&gt;Select City&lt;/option&gt;
                      &lt;option *ngFor="let c of cityList" value="{{c.value}}"&gt;{{c.text}}&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div *ngIf="submitted &amp;&amp; myform.controls.city.errors"&gt;
                      &lt;span class="alert-danger form-control" *ngIf="myform.controls.city.errors?.required"&gt;City is Required&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  Radio:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;label class="radio-inline" *ngFor="let g of genderList"&gt;
                      &lt;input type="radio" [value]="g.value" name="gender" formControlName="gender" [checked]="g.selected"&gt;{{g.text}}
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  CheckBox:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;label class="checkbox-inline" *ngFor="let g of hobbyList"&gt;
                      &lt;input type="checkbox" value="{{g.value}}" name="hobbie" formControlName="hobby" [(ngModel)]="g.checked"&gt;{{g.text}}
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
                  File:
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;img *ngIf="fileURL != null" [src]="fileURL" style="width: 250px; height: 250;"&gt;
                  &lt;input type="file" name="file" formControlName="file" accept="image/*" (change)="uploadImage($event.target.files)"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="col-xs-4"&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-8"&gt;
                  &lt;button type="submit" class="btn btn-default pull-left"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As you can see, setValue is not working for my RadioButton. so I am setting my JsonData selected property accordingly which is actually wrong as per best practice. isn't it?</p>
  
  <p>What could be the best approach for it? </p>