ngModel во входном радио?

Question

Я разрабатываю приложение, используя Angular 6. У меня большая проблема.Используя управляемую шаблоном форму , я бы хотел, чтобы элемент, выбранный в радиокнопке, можно было отправлять, когда я нажимал кнопку отправки .Все нормально, когда я работаю с <input type="text" [(ngModel)] = "value" /> (value - это поле данных моего компонента), но если я попробую с этим:

<div class="form-group">
    <div *ngFor = "let option of options">
    <div class="radio">
        <input type = "radio"
               name = "radio"
               [(ngModel)] = "value"
               />

        <label for="{{option.id}}">{{option.id}}</div>
        </label>

    </div>
    </div>
</div>

В результате получится ошибка!Я не могу даже нажать несколько кнопок, перемещая селектор!Все застряло!Очевидно, это не работает с формой.Если я удаляю [(ngModel)] = "value" графически, это работает, но без директивы ngModel, если я ввожу этот код в управляемую шаблоном форму, которая использует (ngSubmit), это не работает.Большое спасибо.

Answer 1

Вам не хватает значения для каждой из переключателей, поэтому привязка не работает правильно.Невозможно определить, какой вход должен быть проверен, поэтому ни один из них не будет проверен.Обновите шаблон так, чтобы он выглядел примерно так:

<div *ngFor="let option of options">
    <div class="radio">
        <input type="radio"
           name="radio"
           id="radio-{{option.id}}"
           [(ngModel)]="value"
           [value]="option.value"
           />

    <label for="radio-{{option.id}}">{{option.id}}
    </label>

</div>

Демонстрация Stackblitz

Answer 2

Внутри ts-файла:

radio_button_value = null;

box_options = [
{
    "name": "Word",
    "value": "word",
},
{
    "name": "Line",
    "value": "line"
},
]

Внутри html-файла:

Обратите внимание на тэг 'name', мы бы сильно повредили внутри другого цикла for.

<div *ngFor="let box_opt of box_options; let i=index">
      <input name="option-{{i}}" type="radio" [value]="box_opt.value" [(ngModel)]="radio_button_value">
      {{box_opt.name}}
      <br>
</div>

Answer 3

Радио кнопки работают по-разному.Чтобы добавить его, нужно добавить value.Если вы хотите присвоить значение из углового использования [value].

, я запустил его на примере stackblitz :

<div class="form-group">
  <div *ngFor="let option of options; let i=index">
    <div class="radio">
      <input type="radio" id="{{option.id}}" name="radio{{i}}" [(ngModel)]="option.value" [value]="option.id" />
      <label for="{{option.id}}">{{option.id}}</label>    
    </div>
  </div>
</div>

<hr>

<h2>Values for options</h2>

<ul>
  <ng-container *ngFor="let option of options; let i=index">
    <li *ngIf="option.value !== ''">Value for {{option.id}}: {{option.value}}</li>
  </ng-container>
</ul>

Component

value: any;
options = [
{
    id: "test1",
    value: ''
},
{
    id: "test2",
    value: ''
},
{
    id: "test3",
    value: ''
}];

Расширение / Подсказки:

Вы даже можете использовать [(ngModel)] = "value", чтобы назначить последнее выбранное значение для value.

Назначьте эти переключателис тем же именем name="radio", чтобы можно было выбрать только одну из этой группы.