Динамически создаваемый ввод флажка типа не связывает должным образом значение через NgModel

Question

У меня есть динамически созданная форма, обернутая в таблицу, которая появляется, когда я нажимаю кнопку «Изменить» в той же строке. Внутри этой динамической таблицы много условий, что при редактировании строки они показывают некоторые входные данные.

Тип и привязка этих входов являются динамическими. Давайте проверим это:

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

Эта привязка отлично работает как для селекторов (которые не включены в этот фрагмент), так и для текстовых полей. Но это не связывает правильно для входов флажка. На самом деле он не получает фактическое значение внутри данного объекта, поэтому флажок всегда равен «ложь» (хотя иногда значение равно «истина»). Следовательно, установка флажка и сохранение результата не приведет к каким-либо изменениям.

Ссылка, которую вы видите внутри NgModel, отлично сделана; Я уже проверил это, и имена, вовлеченные в этот объект значения ключа, правильно установлены. Проблема где-то еще, но я не знаю где.

Любая помощь?

Answer 1

Этот случай обсуждается в выпуске 7329 на GitHub и считается «ограничением фреймворка» (проблема закрыта).Один из обходных путей, упомянутых в обсуждении, заключается в использовании условных директив.См. этот стек для демонстрации.

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

или

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

Answer 2

Вы можете попробовать указать 'id' для каждого флажка.Я использовал rowIndex в качестве идентификатора в приведенном ниже примере.Вы можете использовать его или дать другое уникальное значение в качестве идентификатора.

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