CODEWITHSUNDEEP
htmlangular
Rhia
Rhia

Reputation: 11

Remove selected options from drop down and display the available options - select-form-control - Angular

I need to remove the selected options from the drop-down and display only the available options in the subsequent drop-downs. The first time getAvailableLocationsList() is returning all the available options. Once the value is selected from the first drop-down, the second drop-down is showing the remaining options that aren't selected yet. But, when I go back to see the first drop-downs value, the option initially selected is not selected, as I'm removing the selected value from the list. The number of drop-downs and options would be dynamic, I would need to have the first drop-down showing all available options, and the consequent drop-downs to not have the already selected options.

HTML Code:

<div formArrayName="locationArray">
    <div *ngFor="let location of list.controls[index].get('locationArray').controls;let locationIndex=index">
        <div [formGroupName]="locationIndex">
            <select class="form-control" formControlName="location" id="{{'location'+index}}" (change)="getLocationName(index, locationIndex)">
                <option disabled value=""> Select</option>
                <option *ngFor="let item of getAvailableLocationsList(index, locationIndex)" ngDefaultControl [ngValue]="item.address">{{item.address}}
                </option>
            </select>
        </div>
    </div>
</div>

Typescript code:

getAvailableLocationsList(index, locationIndex) {
    let locationList = []; // Array- from service;
    const list= <FormArray>this.form.get('list');
    const locationArray = 
    <FormArray>list.controls[index].get('locationArray')['controls'][locationIndex].get('location');
    const locationVal = locationArray.value;
    const selectedLoc = _.findWhere(locationList, { address: locationVal });
    if (!_.isUndefined(selectedLoc)) {
        locationList = _.filter(locationList, (eachLoc) => {
            return eachLoc.address.id!== selectedLoc.id;
        });
    }
    return locationList;
}

Can anyone please help?

Upvotes: 1

Views: 7345

Answers (2)

Jeran
Jeran

Reputation: 41

I'm sorry, my last comment was a bad solution. The reason why is because if you select the wrong option from drop down 1, then select a different option from drop down 1, you will now be missing 2 options from drop down 2 instead of just one. What you should do instead is the following:

disable the option from the list using only one array: in your controller:

arrayOfLocationsForDropdowns = [1, 2, 3, 4, 5];
selectedOptionFromDropDownOne = selected location;

in your html:

drop down 1 :

<select class="form-control" formControlName="location">
    <option *ngFor="let location of locationList" [value]="location">{{location}}</option>
</select>

** still use your filtering technique but don't take out the selected option, set that option equal to the variable selectedOptionFromDropDownOne instead

drop down 2:

<select class="form-control" formControlName="location2">
    <ng-container *ngFor="let location of locationList" >
         <option *ngIf="location != selectedOptionFromDropDownOne" [value]="location">{{location}}</option>
    </ng-container>
</select>

This will allow you to use all of the data without taking any out and it will display all values in the second drop down list except for the option that was selected in the first drop down list.

To make this more dynamic make the variable selectedOptionFromDropDownOne an array and check the array for subsequent drop downs:

arrayOfSelectedOptionsFromPreviousChoices = [] then in the code for future selects:

change the ngIf from *ngIf="location != selectedOptionFromDropDownOne" to *ngIf="!location in arrayOfSelectedOptionsFromPreviousChoices"

Upvotes: 1

Jeran
Jeran

Reputation: 41

One Problem is that everything is set to constants for the information that you are pulling from on this list. Constants cannot be changed.

I would suggest placing the locations you are going to use in a temp array, then once the option is selected, in the function that is called, remove the option from that temp array. That way each time you go back to the drop down, it no longer has that option to provide:

Upvotes: 1

Related Questions