CODEWITHSUNDEEP
angular
LinebakeR
LinebakeR

Reputation: 222

Angular 9, how to focus specific field in ng-select through ngFor

Im pretty new with angular & js. I have 3 ng-select through my ngFor loop.

<div class="filter-input" *ngFor="let input of data; let i = index">
                    <div class="subtitle">{{ input.title | translate }}</div>
                    <ng-select
                    class="ng-select"
                    bindLabel="{{ input.bindLabel }}"
                    bindValue="{{ input.bindLabel }}"
                    [items]="input.data"
                    [multiple]="input.multiple"
                    [clearable]="input.clearable"
                    [searchable] = "input.searchable"
                    groupBy="{{ input.groupBy }}"
                    [selectableGroup]="input.selectableGroup"
                    [selectableGroupAsModel]= "input.selectableGroupAsModel"
                    [addTag]="input.addTag"
                    (change)="isStepSelected($event, i)"
                    [(ngModel)]="input.selection">

                    </ng-select>

That i want to do is to enabled the submit button only if some items from the first dropdown are selected and matching with the items from the 2nd dropdown. Using a method like

public isStepSelected(event, id) {

        if (id === 0 && event) {
            event.length > 0 ? this.isDisabled = false : this.isDisabled = true;
        }

        if(id ===1 && event){
           //do something
        }

I don't know how to perform this, or if exist a better way to do it. Thx for help ! :)

Upvotes: 0

Views: 635

Answers (1)

rajhim
rajhim

Reputation: 269

In your code I have added

[disabled]="i > selectedValue"

in html code.

<div class="filter-input" *ngFor="let input of data; let i = index">
                    <div class="subtitle">{{ input.title | translate }}</div>
                    <ng-select
                    class="ng-select"
                    bindLabel="{{ input.bindLabel }}"
                    bindValue="{{ input.bindLabel }}"
                    [items]="input.data"
                    [multiple]="input.multiple"
                    [clearable]="input.clearable"
                    [searchable] = "input.searchable"
                    groupBy="{{ input.groupBy }}"
                    [selectableGroup]="input.selectableGroup"
                    [selectableGroupAsModel]= "input.selectableGroupAsModel"
                    [addTag]="input.addTag"
                     [disabled] = "i > selectedValue"
                    (change)="isStepSelected(i)"
                    [(ngModel)]="input.selection">

                    </ng-select>
</div>

and added a variable and increased value. while changing.

selectedValue = 0;

public isStepSelected(value) {
 value++;
 this.selectedValue = value; 
}

Upvotes: 1

Related Questions