Radio button is not checked by default angular 2

Question

Here is the code in html file :

       <div class="form-group">
            <div class="form-text">Some Question about Email and Phone Details?</div>


            <div>
                <input type="radio" value="1" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="EmailClicked()"
                ng-model="selectedOption"> Email</div>

            <div>

Text Both

in the component.ts class, I am setting the selectedOption to 1. Like this :

export class TestComponent implements OnInit{
  signUpDetailsForm: FormGroup;
  public submitted : boolean;

  public selectedOption : string ='1';

I can see the selectedOption value is set properly as in ngOnInit the value is printed as 1 :

ngOnInit() {

 console.log('selectedOption='+this.selectedOption);

}

I also tried another way of solving this by setting selectedOption in ng-init but still doesn't work .

<div ng-init="selectedOption=1">
                <div>
                    <input type="radio" value="1" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="EmailClicked()"
                    ng-model="selectedOption"> Email</div>

                <div>
                    <input type="radio" value="2" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="PhoneClicked()"> Text</div>
                <div>
                    <input type="radio" value="3" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="BothClicked()"> Both</div>

</div>

UPDATE

my updated code looks like this and it still doesn't select radio by default:

<div class="form-group">
            <div class="form-text">Some Question about Email and Phone Details?</div>


            <div>
                <input type="radio" value="1" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="EmailClicked()"
                [(ngModel)]="selectedOption"> Email</div>

            <div>
                <input type="radio" value="2" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="PhoneClicked()"> Text</div>
            <div>
                <input type="radio" value="3" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="BothClicked()"> Both</div>


        </div>

//This is in component.ts class:

public selectedOption :string;
ngOnInit() {

this.selectedOption="1";

}

Answer 1

got hint from William's comment. answer posted here:

@Component({
  selector: 'my-app',
  template: `

<form>

     <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <header class="header col-md-8">
<div class="form-group">
                <div class="form-text">Some Question about Email and Phone Details?</div>


                <div>
                    <input type="radio" [value]="1"  name="details" [(ngModel)]="selectedOption">
                    Email</div>

                <div>
                    <input type="radio" [value]="2"  name="details" [(ngModel)]="selectedOption"> Text</div>
                <div>
                    <input type="radio" [value]="3"  name="details" [(ngModel)]="selectedOption"> Both</div>

            </div>

            </header>

        </div>
     </div>
</form>
  `,
})
export class App {
   public selectedOption :number =3;
  constructor() {

  }
}

Answer 2

I had a similar problem but using angular mat-radio-group and binding of the data to the form-group. Instead of two-way binding to your model, bind the result of the selection to the model and another value to the form-group.

On the other hand, I think you don't need to bind the values in the radio-buttons, just specify the value that the radio button will emit to your model if it is selected.

@Component({
  selector: 'my-app',
  template: `

<form>

 <div class="container">
    <div class="row">
        <div class="col-md-2"></div>
        <header class="header col-md-8">
<div class="form-group" [value]= "this.selectedOption">
            <div class="form-text">Some Question about Email and Phone 
Details?</div>


            <div>
                <input type="radio" value=1  name="details" 
(ngModel)="selectedOption">
                Email</div>

            <div>
                <input type="radio" value=2  name="details" 
(ngModel)="selectedOption"> Text</div>
            <div>
                <input type="radio" value=3  name="details" 
(ngModel)="selectedOption"> Both</div>

        </div>

        </header>

    </div>
 </div>
</form>
  `,
})
export class App {
  public selectedOption :number =3;
  constructor() {

  }
}