CODEWITHSUNDEEP
formsangular-reactive-formsangular14selectall
sree K
sree K

Reputation: 11

angular v-14: not able to use ngmodelchange for option in an reactive form

i am working an angular 14, i have an reactive form which has multiple drop downs whihc have several options , i have a select all deselect all option which is hardcoded along with all the options which are dynamic coming from an api <mat-form-field *ngSwitchCase="'multi-select'">

            <mat-select [formControlName]="this.getPropertyKey(property)"
            (closed)="onSelectPanelClosed($event,property)"    (selectionChange)="selectChangeDetected($event, property)" [id]="getIdProperty(property)" multiple>

                <!-- Input field for searching options -->
                <input class=" add-option-input" [placeholder]="'Search'"
                    (input)="inputChangeDetected($event,property)" [id]="getIdProperty(property) + '-input'">

{{SelectAllArray[this.getPropertyKey(property)]}} <mat-option [value]="'selectAll'" [(ngModel)]="SelectAllArray[this.getPropertyKey(property)]" (ngModelChange)="onSelectAllChanged($event, property)" (onSelectionChange)="SelectAllChanged($event, property)"> Select All/De-Select All

                <mat-option *ngFor="let option of options[this.getPropertyKey(property)];trackBy: trackByFn"
                    [value]="option.value" [id]="option.id">
                    {{ option.value }}
                </mat-option>
            </mat-select>
        </mat-form-field>

when anyone of the dynamic options is unselected after selecting the select all option , in want to unselect it i have used an ngmodel to trigger the change , in the template the value is getting changed but the option is not getting deselected , all of these r present in an reactive form group

Upvotes: 0

Views: 74

Answers (0)

Related Questions