Angular2 dropdowns selection in a loop

Question

I have two arrays serviceOptions and reactivePackages. Against each service Options there is an array of reactive packages (Shown in dropdown list).

Now I am dynamically creating dropdowns in a loop. My issue is how to get the selected options of dropdowns on form submission ? (It's a part of form)

 <label *ngFor="let service of serviceOptions">
    <b>{{service.serviceName}}</b>
    <br /><br />
    <md-select placeholder="Select Package" formControlName="packageName" size="30">
      <ng-container *ngFor="let package of (reactivePackages | async)">
        <md-option *ngIf="service.serviceId==package.serviceId" [value]="package" (click)="hello()">
          {{ package.packageName }}
        </md-option>
      </ng-container>
    </md-select>
    <br />  <br />
  </label>

How would you like that the form object looks like?

AVJT82
– AVJT82

2017-07-27 11:32:23 +00:00
Commented Jul 27, 2017 at 11:32 — AVJT82
– AVJT82, Commented Jul 27, 2017 at 11:32

Kamaal · Accepted Answer · 2017-07-27 10:42:31Z

1

    You can achieve it by saving the selected option in a variable. 

    You need to follow just two steps.
    1. Create a method on component.ts that will store the selected option.
    Example- 

      selectedData(event: any) {
       this.storedData = event.target.value;
      }

    2. Call this method on html.
    Example-

 <select class="form-control" (change)="selectedData($event)">
 <option *ngIf="service.serviceId==package.serviceId" [value]="package">{{ package.packageName }}</option>
</select>

3.Then simply call a method that will save the selected data.

answered Jul 27, 2017 at 10:42

Kamaal

615 bronze badges

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

Collectives™ on Stack Overflow

Angular2 dropdowns selection in a loop

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