Checkbox not loading properly in Angular 4

Question

I am new to Angular 4 and I am learning through the docs from angular.io.

When I am trying to add a checkbox to a Dynamic Form, the form is not being loaded.

This is the link to my code - Link

I have added 2 Check box groups and 1 Radio button group, but only the first check box group is loading and rest of the elements are not loading.

I forked the stackblitz and fixed the code as per Alexander's answer (which should be marked correct). You can see it here: stackblitz.com/edit/angular-njjkhr-gsjd7e?file=src/app/… — rmcsharry
– rmcsharry, Commented Mar 28, 2018 at 11:04

Alexander Peinsipp · Accepted Answer · 2018-03-28 10:57:14Z

1

You have to set the [formControlName]="question.key" to the input tag and not to the div element. You can see the error with the Chrome WebDeveloperTools: No value accessor for form control with name: '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 forked link: Link

edited Mar 28, 2018 at 10:57

answered Mar 28, 2018 at 10:50

Alexander Peinsipp

1331 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ArigatoManga Over a year ago

@alexander..thanks for the information..based on the console log error how did you conclude that the change was in the formcontrol (this will help in my future debugging pursoses)..

Alexander Peinsipp Over a year ago

I have read that error somewhere in the past. FYI: You can use formControlName only on directives which implement ControlValueAccessor (see link)

Collectives™ on Stack Overflow

Checkbox not loading properly in Angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related