Angular 2 dynamic form with checkbox doesn't work?

Question

Angular 2 dynamic form example from Angular 2 website is modified slightly to include checkbox control into the mix. Here is the plnkr with checkbox added.

Unable to get the checkbox checked value on form submit. Textbox and dropdown values are updated on submit though.

Note: I have also tried putting [(ngModel)] on checkbox but value doesn't update even then.

Thanks @Aish123, sensing on change event for checkbox and updating the value did the trick. Posting the answer below. — Nexus23
– Nexus23, Commented May 24, 2016 at 12:13

Nexus23 · Accepted Answer · 2016-05-24 12:15:59Z

2

I have to make two changes on checkbox control to update the value:

Add [(ngModel)]
update the value on (change) event.

Here is the plnkr with fix if anyone encounters the same issue.

For brevity here is what checkbox control looks like now:

<input #ck *ngSwitchWhen="'checkbox'" (change)="control.value = ck.checked" [id]="control.key" [ngControl]="control.key" [type]="control.type" [class.error]="!control.valid"
           [(ngModel)]="control.value" class="form-control">

answered May 24, 2016 at 12:15

Nexus23

6,41310 gold badges53 silver badges68 bronze badges

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

1 Comment

IKriKan Over a year ago

I verified this plnkr example and it was not displaying checked status on submit click. Can you update the solution with proper fix?

Nexus23 · Accepted Answer · 2016-05-24 12:14:21Z

1

I think the problem is linked to input behaviour described by MDN:

The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed. (For input elements with type=checkbox or type=radio, the input event does not fire when a user clicks the control, because the value attribute does not change.)

input - Event reference | MDN

edited May 24, 2016 at 12:14

Nexus23

6,41310 gold badges53 silver badges68 bronze badges

answered May 24, 2016 at 11:26

user6375817

112 bronze badges

2 Comments

Nexus23 Over a year ago

Any solution for this problem in Angular 2 world?

user6375817 Over a year ago

i do not know, because i have too this problem with file inputs

Qetesh · Accepted Answer · 2018-05-16 13:58:42Z

@Nexus23's solution works but the usage of template reference var #ck allows for only one checkbox within a FormGroup.

You can set a FormControl's value (in a FormGroup) directly from the change event:

(change)="formGroup.controls[element.name].setValue($event.target.checked)"

Since FormControl.setValue's emitEvent, emitModelToViewChange and emitViewToModelChange default to true, it's seems not necessary to update other attributes manually.

Modified for angular's dynamic form (working example on stackblitz):

<input *ngSwitchCase="'checkbox'" [formControlName]="question.key"
        [id]="question.key" [type]="question.type" (change)="form.controls[question.key].setValue($event.target.checked)">

user3441993 · Accepted Answer · 2016-07-27 05:48:36Z

0

I think that since this is used for dynamic forms, we can't hard-code the checkbox reference ID as we might have more than one checkbox in the form. Also, if the initial value is checked, the checkbox still appears unchecked. The code below fixes these issues (tested with Angular 2 rc4). I've also added a label for the checkbox. Hope that helps.

    <label *ngSwitchCase="'checkbox'"><input (change)="question.value = $event.target.checked" [(ngModel)]="question.value" [attr.checked]="question.value ? true : null" [formControlName]="question.key" [id]="question.key" [type]="question.type"> {{question.label}}</label>

answered Jul 27, 2016 at 5:48

user3441993

1

Collectives™ on Stack Overflow

Angular 2 dynamic form with checkbox doesn't work?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related