Question 44583 in Html Question posted in
Some basic documentation can be found here.

Angular 10. Radio button is not checked by default – Html

We have the radio button group and try to make the default selection for Female Radio option.

<ng-template #genderTemplate>
      <div>
        <div>
          <label class="ari-label" for="gender">Gender</label>
        </div>
        <label class="ari-control ari-control-radio ari-control-inline">
          <input formControlName="gender" type="radio" [value]="true" /> Male
          <div class="ari-control-indicator"></div>
        </label>
        <label class="ari-control ari-control-radio ari-control-inline">
          <input formControlName="gender" type="radio" [value]="false" [checked]="!gender"/> Female
          <div class="ari-control-indicator"></div>
        </label>
      </div>
    </ng-template>

It is not working. Any clue?

Tags:

2

Answers


  1. 0

    You will have add name="gender" in html
    Too in the .ts add gender:boolean=false;

    <ng-template #genderTemplate>
<div>
  <div>
    <label class="ari-label" for="gender">Gender</label>
  </div>
  <label class="ari-control ari-control-radio ari-control-inline">
    <input formControlName="gender" type="radio" name="gender" ngModel [value]="true" /> Male
    <div class="ari-control-indicator"></div>
  </label>
  <label class="ari-control ari-control-radio ari-control-inline">
    <input formControlName="gender" type="radio" name="gender" ngModel [value]="false" [checked]="!gender"/> Female
    <div class="ari-control-indicator"></div>
  </label>
</div>
    Login or Signup to reply.
  2. 0

    To your HTML template, I added the name attribute to group the radio buttons together. I changed the value of male to ‘male’ and the value of female to ‘female’. Then I set the default value for the gender formControl in Typescript to ‘female’, so the female button will be selected initially.

    Better would be to initialize an enum for the gender types.

    Therefore, your template should look something like:

    <ng-template #genderTemplate>
  <div>
    <div>
      <label class="ari-label" for="gender">Gender</label>
    </div>
    <label class="ari-control ari-control-radio ari-control-inline">
      <input
        formControlName="gender"
        type="radio"
        name="gender"
        value="male"
      />
      Male
      <div class="ari-control-indicator"></div>
    </label>
    <label class="ari-control ari-control-radio ari-control-inline">
      <input
        formControlName="gender"
        type="radio"
        name="gender"
        value="female"
      />
      Female
      <div class="ari-control-indicator"></div>
    </label>
  </div>
</ng-template>

    Typescript form group:

    form: UntypedFormGroup;
constructor(private fb: UntypedFormBuilder) {
    this.form = this.fb.group({
        gender: ['female'],
        // all the other controls in the form
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search