Checkbox not loading properly in Angular 4

Question

I am new to Angular 4 and I am learning documents from angular.io.

When I try to add a checkbox to a dynamic form, the form does not load.

This is a link to my code - Link

I added 2 groups of flags and 1 group of radio buttons, but only the first group of flags is loaded, and the rest of the elements are not loaded.

Answer 1

You should set [formControlName] = "question.key" to the input tag, not the div element. You can see the error using Chrome WebDeveloperTools: there is no value attribute for the form control named: 'flightRules'.

<div [id]="question.key" *ngSwitchCase="'checkbox'" >
  <span *ngFor="let opt of question.options">
    <label>
      <input [type]="question.controlType" [value]="opt.value" [formControlName]="question.key">
      {{opt.value}}
    </label>
  </span>
</div>

<div [id]="question.key" *ngSwitchCase="'radio'">
  <span *ngFor="let opt of question.options">
    <label>
      <input [type]="question.controlType" [value]="opt.value" [formControlName]="question.key">
      {{opt.value}}
    </label>
  </span>
</div>

See the branched link: Link