Radio button , both buttons are getting selected-CodePudding

<div >
  <div >
    <form>
      <div >
        <label>username</label>
        <br />
        <input type="text"  />
      </div>
      <div >
        <label>email</label>
        <br />
        <input type="email"  />
      </div>
      <div >
        <label>secret question</label>
        <br />
        <select type="radio" >
          <option value="pet">your fav. pet?</option>
          <option value="teacher">your fav. teacher?</option>
        </select>
      </div>
      <div >
        <textarea cols="60" rows="5"></textarea>
      </div>
      <div>
        <p style="margin: 10px">your reply:</p>
      </div>
      <div  *ngFor ="let gender of genders">
        <label> <input type="radio" [value]="gender" />{{ gender }} </label>
      </div>
      <button type="submit" style="margin-left: 10px">submit</button>
    </form>
  </div>
</div>

here in div I am passing a string array which contains 2 value 'male' and 'female'. Expected behavior should be once male selected female should get UN-selected and vice versa. But I don't know why I am able to select both male and female radio button.

Thanks in advance

CodePudding user response：

You have to add an attribute name on your input

<input type="radio" [value]="gender" name="gender" />{{ gender }}