CODEWITHSUNDEEP
angularradio-buttonangular6
matQ
matQ

Reputation: 617

Angular 6 input radio checked value not working in edit form?

This is my input radio: This is inside a modal that recieves the usuario (user) from a table with an edit button in each row.

<div class="form-group">
                <label for="sexo">Sexo {{usuario.sexo === 0}}</label>
            <div class="form-control" [ngClass]="{ 'is-invalid': f.submitted && gender.invalid }">
            <label class="radio-inline">
                <input type="radio" name="gender" required #gender="ngModel"
                value= "0"
                 [(ngModel)]="usuario.sexo"> Femenino
            </label>

            <label class="radio-inline">
                <input type="radio" name="gender" required #gender="ngModel"
                value= "1"  [(ngModel)]="usuario.sexo"> Masculino
            </label>
                
                 
</div>

The sexo is an integer value in db (0 for female, 1 for male). I have two objects (rows) in my table, the first is male (1) and the second is female (0), but when I open the modal none of the two option are selected, no option is checked, but the label works fine:

<label for="sexo">Sexo {{usuario.sexo === 0}}</label> // show true or false correctly, so the value is not null.

What I am missing to show the checked radio according to the usuario.sexo (integer)?

Upvotes: 0

Views: 1773

Answers (2)

hpfs
hpfs

Reputation: 506

Don't know if it still worth but....

<label class="radio-inline">
      <input type="radio" name="gender" required #gender="ngModel"
      [value]="'0'"
       [(ngModel)]="usuario.sexo"> Femenino
</label>

just for the zero value. For all the other integer values

<label class="radio-inline">
      <input type="radio" name="gender" required #gender="ngModel"
      [value]="1"
       [(ngModel)]="usuario.sexo"> Masculino
</label>

<label class="radio-inline">
      <input type="radio" name="gender" required #gender="ngModel"
      [value]="2"
       [(ngModel)]="usuario.sexo"> No quiero decir
</label>

Upvotes: -1

Marshal
Marshal

Reputation: 11081

Use property binding on your value attribute so that it will be of type number and not string.

[value]= "0"

<label class="radio-inline">
                <input type="radio" name="gender" required #gender="ngModel"
                [value]= "0"
                 [(ngModel)]="usuario.sexo"> Femenino
            </label>

Upvotes: 0

Related Questions