(ngModelChange) / (change) is not working in angular input tag-CodePudding

I have to get the event data from (ngModelChange) or (change) of checkbox in input tag. I don't know why both are not working. I'm triggering this event inside the multiple modals. And i think that may be the cause.(Assumption only). Or is there any other way to achieve this in Typscript?.

<div >
    <ng-select  [items]="valve_manual_on" bindLabel="name" bindValue="id" [multiple]="true" 
        [closeOnSelect]="false" placeholder="Select Valve" [(ngModel)]="selectedManualValves">
            
        <ng-template ng-multi-label-tmp>
            <div >
                <span  *ngIf="selectedManualValves.length===1">
                    {{finder(selectedManualValves)}}</span>
                <span  *ngIf="selectedManualValves.length>1">
                    {{selectedManualValves.length}} Selected </span>
            </div>
        </ng-template>

        <ng-template ng-option-tmp let-item="item" let-index="index" let-item$="item$">
            <div >
                <input type="checkbox" (ngModelChange)="onChange($event)" [ngModel]="item$.selected"  />
                <label >
                    &nbsp;&nbsp;{{item.name}}</label>
            </div>
        </ng-template>

    </ng-select>
</div>

CodePudding user response：

try to use

<input type="checkbox" (change)="onChange($event)" [(ngModel)]="item$.selected"  />

CodePudding user response：

Use reactive forms instead.


control = new FormControl(true, [Validators.required]);

// ...

this.control.valueChanges.subscribe(value => console.log(value));

<input type="checkbox" [formControl]="control"  />

CodePudding user response：

I have cleared a issue, Just used change event inside the ng-select tag and it is working for me.

<ng-select  [items]="valve_manual_on" bindLabel="name" bindValue="id" [multiple]="true" **(change)="onChange($event)"**
    [closeOnSelect]="false" placeholder="Select Valve" [(ngModel)]="selectedManualValves">
        
    ..//

</ng-select>