Angular 2, primeng :Two way binding in nested *ngFor and ngModel in Primeng in *ngFor

Question

I have a bunch of questions in Angular 2

I have created a demo to show you the behaviour

Stack : Anglar 2, Primeng

https://stackblitz.com/edit/primeng-template-5hrvte

Question 1 :

I have a json file, through that i have created dynamic UI like checkbox and inputs and populated checkbox options dynamically. Now, problem starts from here no ngModel is working for comboBox, inputs or checkbox (i want to show default value)

Update Question 1 : I got the solution for it but still stuck on Question 2

 [(ngModel)]="arrays.field[index].defaultValue" in input field
 [(ngModel)]="arrays.field[index].item[0].value" in dropdown
 [(ngModel)]=uiItems.defaultValue in checkbox {Refer ANS 1 soluton for it}

also add

[name]="uiItems.id"

in order to populate default value

Question 2 : How to make it two way binding in this scenario how do it get changed value objects?

Answer 1

For COMBOBOX please use the following structure where block (A) has proper default value.

{
  "uiWidget": "COMBOBOX",
  "id": "7",
  "name": "Order Type",
  "key": "pl.export.label.orderType",
  "defaultValue": "DEFAULT", // ------- (A)
  "width": "250",
  "isEnabled": "true",
  "item": [
    {
      "key": "00",
      "value": "DEFAULT"
    },
    {
      "key": "01",
      "value": "WILL CALL PICK UP"
    }
  ]
}

corresponding COMBOBOX html code

<p-autoComplete 
    #dropdownValue 
    [inputId]="uiItems.id"
    [dropdown]="true"
    [name]="uiItems.id"
    [(ngModel)]="arrays.field[index].defaultValue"
    [suggestions]="getOptions(uiItems.item)">
</p-autoComplete>

In this case it will update the defaultValue attribute of the " uiItems "

All code of app.component.html

<form #addPartDialogForm="ngForm" autocomplete="off">
    <div *ngFor="let arrays of buildUI">
      <div *ngFor="let uiItems of arrays.field;  let index = index">

<br/>

        <div *ngIf="uiItems.uiWidget === 'TEXTINPUT'">
          <div>
            <span class="ui-inputgroup-addon"> {{uiItems.name}}</span>
            <input  [name]="uiItems.id" [(ngModel)]="arrays.field[index].defaultValue"
              [type]="uiItems.type" pInputText>
              <pre style="color:red;">{{arrays.field[index] | json}}</pre>
          </div>
        </div>
<br/>
        <div *ngIf="uiItems.uiWidget === 'COMBOBOX'">
          <div>
            <span class="ui-inputgroup-addon"> {{uiItems.name}}</span>
            <p-autoComplete #dropdownValue [inputId]="uiItems.id"
                            [dropdown]="true"
                            [name]="uiItems.id"
                            [(ngModel)]="arrays.field[index].defaultValue"
                            [suggestions]="getOptions(uiItems.item)">
            </p-autoComplete>
            <pre style="color:red;">{{arrays.field[index] | json}}</pre>
          </div>
        </div>


        <div *ngIf="uiItems.uiWidget === 'CHECKBOX'">
          <div>
            <span class="ui-inputgroup-addon"> {{uiItems.name}}</span>
            <p-checkbox #checckbox
                        [name]="uiItems.id"
                        [binary]="true"
                        [inputId]="uiItems.id"
                        [(ngModel)]= "uiItems.defaultValue" 
            ></p-checkbox>
          </div>
        </div>

      </div>
    </div>
  </form>

please check the inline screenshot.

Answer 2

I think your problem is here

"defaultValue": "false",

where you want to set a boolean, but set a string instead, which is resolved to true. boolean variables aren't set with quotes. try

"defaultValue": false,

You have that problem anywhere you try to set a boolean.