CODEWITHSUNDEEP
htmlangulartypescriptangular-ngmodelchange
Logamuhilan Mobitech
Logamuhilan Mobitech

Reputation: 1

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

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 class="col-md-6 resclass3">
    <ng-select class="custom" [items]="valve_manual_on" bindLabel="name" bindValue="id" [multiple]="true" 
        [closeOnSelect]="false" placeholder="Select Valve" [(ngModel)]="selectedManualValves">
            
        <ng-template ng-multi-label-tmp>
            <div class="ng-value">
                <span class="ng-value-label" *ngIf="selectedManualValves.length===1">
                    {{finder(selectedManualValves)}}</span>
                <span class="ng-value-label" *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 class="custom-control custom-checkbox">
                <input type="checkbox" (ngModelChange)="onChange($event)" [ngModel]="item$.selected" class="custom-control-input" />
                <label class="form-check-label ml-2 custom-control-label">
                    &nbsp;&nbsp;{{item.name}}</label>
            </div>
        </ng-template>

    </ng-select>
</div>

Upvotes: 0

Views: 687

Answers (3)

Logamuhilan Mobitech
Logamuhilan Mobitech

Reputation: 1

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

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

</ng-select>

Upvotes: 0

MGX
MGX

Reputation: 3531

Use reactive forms instead.


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

// ...

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


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

Upvotes: 0

Trafalino
Trafalino

Reputation: 145

try to use

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

Upvotes: 0

Related Questions