Dynamically created input of type checkbox doesn't properly bind value through NgModel

Question

I've got a dynamically created form, wrapped in a table, that appears when I click in an "edit" button of that same row. There are a lot of conditionals inside that dynamic table that when the row is being edited, they show some inputs.

The type, and the binding of those inputs, are all dynamic. Let's check this one:

<td  *ngIf="table?.getInputType(column.key) && table?.isInputActive(column.key, rowIndex) && column.key != table?.buttonsColumn">
    <input *ngIf="table?.getInputType(column.key) != 'select' && column.key != table?.buttonsColumn"
        [type]="table?.getInputType(column.key)"
        [(ngModel)]="sortedValue.referenceObject[column.key]">

This binding works perfect for both selects (which are not included in this snippet), and text fields. But it doesn't bind correctly for checkbox inputs. It doesn't really get the actual value inside the given object, therefore the checkbox is always as "false" (though the value is at "true" sometimes). Consequently, ticking the box and saving the result won't generate any change.

The reference you can see inside the NgModel is perfectly done; I already checked it and the names involved in this key-value object are correctly put. The problem is somewhere else, but I don't know where.

Any help?

@chaitanya I was trying to, but it's a quite complex component and it would be a pain to replicate all the logic. — Zerok
– Zerok, Commented May 15, 2018 at 11:33

Martin Parenteau · Accepted Answer · 2018-05-15 12:17:46Z

2

This case is discussed in the issue 7329 on GitHub, and is considered "a limitation of the framework" (the issue is closed). One workaround mentioned in the discussion is to use conditional directives. See this stackblitz for a demo.

<ng-container [ngSwitch]="inputType">
  <input *ngSwitchCase="'checkbox'" type="checkbox" [(ngModel)]="value">
  <input *ngSwitchCase="'password'" type="password" [(ngModel)]="value">
  <input *ngSwitchCase="'email'" type="email" [(ngModel)]="value">
  <input *ngSwitchDefault type="text" [(ngModel)]="value">
</ng-container>

or

<input *ngIf="inputType === 'checkbox'" type="checkbox" [(ngModel)]="value">
<input *ngIf="inputType !== 'checkbox'" type="text" [(ngModel)]="value">

answered May 15, 2018 at 12:17

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Comments

monica · Accepted Answer · 2018-05-15 11:49:51Z

0

You can try giving an 'id' to each checkbox. I have used rowIndexas id in the below example. You can use it or give some other unique value as id.

<td  *ngIf="table?.getInputType(column.key) && table?.isInputActive(column.key, rowIndex) && column.key != table?.buttonsColumn">
   <input *ngIf="table?.getInputType(column.key) != 'select' && column.key != table?.buttonsColumn" 
                     [id]="rowIndex" [type]="table?.getInputType(column.key)"
                            [(ngModel)]="sortedValue.referenceObject[column.key]">

answered May 15, 2018 at 11:49

monica

1,48415 silver badges29 bronze badges

1 Comment

Zerok Over a year ago

Thanks, but this isn't the topic! The thing is that the inputs which are checkboxes, don't bind their value to the actual object that is being used in that row; which is weird because it doesn't happen with text inputs.

Collectives™ on Stack Overflow

Dynamically created input of type checkbox doesn't properly bind value through NgModel

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related