радио входы не работают правильно в угловых 7

Question

Я получил радиовходы, созданные с использованием структурной директивы ngFor.

    <form>
      <label *ngFor="let user of staffMembers" class="stuff" for="user.username"> 
          {{user.username}}
          <input type="radio" [name]="user.username" [value]="user.username"> 
      </label>
    </form>

Я правильно ввел данные, но могу отметить несколько полей, например, флажок. Это не стандартное поведение для радиовходов.

Answer 1

Поскольку вы создаете новую радиогруппу с каждой строкой, а не новую опцию радиосвязи.Вход [имя] - это название группы радиосвязи, а НЕ опция.

 <form>
  <label *ngFor="let user of staffMembers" class="stuff" for="user.username"> 
      {{user.username}}
      <input type="radio" name="staffMembers" [value]="user.username"> 
  </label>
</form>

Answer 2

Вам необходимо присвоить всем радиовходам одно и то же имя:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

В настоящее время кажется, что каждый радиовход получает разный, так как user.username всегда отличается.

Answer 3

Имя не должно быть уникальным, чтобы получить нормальное поведение, в противном случае это просто радио с единственной возможностью.

<input type="radio" name="user" [value]="user.username">