I'm developing an application using Angular 6. I have a big problem. Using a template-driven form I would like that the item selected in a radio button can be sent when I press the submit button. It's all right when I work with <input type="text" [(ngModel)] = "value" /> (value is a data field of my component), but if I try with this:

<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>

The result is a bug! I can't even click the multiple buttons by moving the selector! Everything is stuck! Obviously it does not work with the form. If I remove [(ngModel)] = "value" graphically it works, but without ngModel directive if I enter this code inside a template-driven form that uses (ngSubmit) it does not work. Thanks a lot.

I'm developing an application using Angular 6. I have a big problem. Using a template-driven form I would like that the item selected in a radio button can be sent when I press the submit button. It's all right when I work with <input type="text" [(ngModel)] = "value" /> (value is a data field of my component), but if I try with this:

<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>

The result is a bug! I can't even click the multiple buttons by moving the selector! Everything is stuck! Obviously it does not work with the form. If I remove [(ngModel)] = "value" graphically it works, but without ngModel directive if I enter this code inside a template-driven form that uses (ngSubmit) it does not work. Thanks a lot.

• javascript
• typescript
• angular6
• frontend

3 Answers 3

You are missing a value for each of the radio buttons so the binding does not work correctly. It is unable to determine which input should be checked so none of them get checked. Update the template to be something like:

<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 Demo

Radio buttons work different. To need to add a value to make it work. If you want to assign a value from angular use [value].

I have make it running in an example of 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: ''
}];

Extension/Hints:

You can even use [(ngModel)] = "value" to assign the last selected value to value.

Give these radio buttons the same name name="radio" to ensure that only one of this group can be selected.

Inside the ts file :

radio_button_value = null;

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

Inside the html file:

Do notice of the tag 'name', it would we a great concern inside another for loop.

<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>