data is not showing in dropdown template driven form

Question

there is a template-driven form and within this form, there is a dropdown. I want to show data from the backend to the dropdown.

Here data is coming from the backend in appliesWhenData.

<form #appliesWhen="ngForm">
        <section class="form-inline" *ngFor="let awhen of appliesWhenData; let i = index;">
          <div class="col-auto my-1">
            <select class="custom-select mr-sm-2 form-control">
              <option [ngValue]="" disabled >Select field</option>
              <option [ngValue]="f" *ngFor="let f of fieldList">{{f.displayName}}
              </option>
            </select>
          </div>
</section>
</form>

and if I log appliesWhenData it will print:

[
  {
    "id": 1,
    "detailSrl": 5,
    "value": "123",
    "local_id": 1,
    "fieldListDetail": {
      "id": 5,
      "fieldName": "officeLocation",
      "displayName": "OfficeLocation"
    },
    "conditionListDetail": {
      "id": 1,
      "condition": "Equals"
    }
  },
  {
    "id": 2,
    "detailSrl": 5,
    "value": "321",
    "local_id": 2,
    "fieldListDetail": {
      "id": 3,
      "fieldName": "productType",
      "displayName": "ProductType"
    },
    "conditionListDetail": {
      "id": 4,
      "condition": "LessThanEquals"
    }
  }
]

What I have tried so far:

<form #appliesWhen="ngForm">
        <section class="form-inline" *ngFor="let awhen of appliesWhenData; let i = index;">
          <div class="col-auto my-1">
            <select class="custom-select mr-sm-2 form-control" [(ngModel)]="awhen.fieldListDetail" name="fieldName{{ awhen.id }}">
              <option [ngValue]="" disabled >Select field</option>
              <option [ngValue]="f" *ngFor="let f of fieldList">{{f.displayName}}
              </option>
            </select>
          </div>
</section>
</form>

Only I need to show selected data in drop. The selected data coming from backend is in appliesWhenData.fieldListDetail and the list which will be there is fieldList. Please help!

You are using *ngFor="let f of fieldList". What kind of data is there in fieldList. — RK001
– RK001, Commented May 10, 2021 at 3:49
Can you tell what are the options and value need to use from that response? — Sanka Sanjeeva
– Sanka Sanjeeva, Commented May 10, 2021 at 3:50
@RK001 actually, is a dropdown so the user can update the data. first, it will show selected data which is in appliesWhenData and the list is in field list. — Karan Gupta
– Karan Gupta, Commented May 10, 2021 at 3:59
@SandeepKumar should *ngFor="let f of fieldList" it should be *ngFor="let f of fieldListDetail" as per the log you have printed and more over fieldListDetail should be a type of array i guess — Nidhin Kumar
– Nidhin Kumar, Commented May 10, 2021 at 4:21

Omkar Godse · Accepted Answer · 2021-05-10 04:22:19Z

0

Please try binding data like this:

          <option [ngValue]="f" *ngFor="let f of fieldList">{{f.fieldListDetail.displayName}}
          </option>

answered May 10, 2021 at 4:22

Omkar Godse

811 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

data is not showing in dropdown template driven form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related