HTML
<div class="form-group"> <label for="usr"><b>Username:</b></label> <input type="text" (keyup)='keyUp.next($event)' (ngModelChange)="disableEnableLogin()" [ngModel]="getUsername" class="form-control" id="usr"> </div> <div class="form-group"> <label for="pwd"><b>Password:</b></label> <input type="password" (keyup)='keyUp.next($event)' (ngModelChange)="disableEnableLogin()" [ngModel]="getPassword" class="form-control" id="pwd"> </div> </div>TS
disableEnableLogin() { console.log('hi'); }DisableEnableLogin no se activa (ngModelChange)
Deberías usar ngModelChange con $event. Por cierto, su solución funciona para mí, pero hay algunos errores con keyup. Por lo tanto, eliminar la llave también debería funcionar de su lado.
HTML:
<div> <div class="form-group"> <label for="usr"><b>Username:</b></label> <input type="text" (ngModelChange)="disableEnableLogin($event)" [ngModel]="getUsername" class="form-control" id="usr" /> </div> <div class="form-group"> <label for="pwd"><b>Password:</b></label> <input type="password" (ngModelChange)="disableEnableLogin($event)" [ngModel]="getPassword" class="form-control" id="pwd" /> </div> </div>TS:
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { public disableEnableLogin(newValue: any){ console.log(newValue); } }Y tal vez tenga en cuenta que hay dos soluciones.
(ngModelChange) = "disableEnableLogin()" se activará antes de que se cambie el valor vinculado a [(ngModel)] = "valor"
mientras que (change) = "disableEnableLogin()" se activará después de que se cambie el valor vinculado a [(ngModel)] = "valor"
Estoy agregando un enlace al plunker si quieres probarlo directamente y cambiar algo.
Espero haber ayudado.
Básicamente, ngModelChange se activará cuando cambie el valor del modelo y el método de change se active cuando cambie el valor y deje el foco de entrada.