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?

While stackblitz is a the good tool to provide examples with Angular, please also copy and format the relevant parts of the code in the question itself, because the link can rot and the question will be much unclear without it. — Pac0
@Pac0 ok, can you review the question by the link and how can we achive two way binding in this scenario? — mave

RANJIT PATRA RANJIT PATRA · Accepted Answer · 2018-12-05T10:30:02

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.

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

2 Answers

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