Disattiva pulsante quando l'input è vuoto in Angular 2

Question

Voglio verificare se l'input è vuoto.

• Se non vuoto, abilitare il pulsante di invio.
• Se vuoto, disabilitare il pulsante Invia .

Ho provato (oninput) e (onchange), ma non funzionano.

<input type="password" [(ngModel)]="myPassword" (oninput)="checkPasswordEmpty()"/> 

checkPasswordEmpty() { 
    console.log("checkPasswordEmpty runs"); 
    if (this.myPassword) { 
     // enable the button 
    } 
} 

Answer 1

In questo caso, vorrei sfruttare i validatori di modulo. Vorrei aggiungere la convalida "richiesta" sul tuo input e utilizzare lo stato globale del tuo modulo per disabilitare/abilitare il tuo pulsante.

Con l'approccio basato su template, non esiste un codice da aggiungere nel componente, solo roba nel suo modello ...

Ecco riportato di seguito:

<form #formCtrl="ngForm"> 
    <input ngControl="passwordCtrl" required> 
    <button [disabled]="!formCtrl.form.valid">Some button</button> 
</form> 

Answer 2

di legarsi funzioni agli eventi, non devi mettere come prefisso con on. Basta posizionare l'evento.

Ad esempio, se si desidera gestire la keydown (plunker demo):

<input type="password" [(ngModel)]="myPassword" (keydown)="checkPasswordEmpty($event)"/> 

---

Ma nel tuo caso specifico, dal momento che si sta già utilizzando ngModel si sta meglio con (ngModelChange):

<input type="password" [(ngModel)]="myPassword" (ngModelChange)="checkPasswordEmpty()"/> 

Perché raccoglierà le modifiche quando l'utente incolla (tramite CTRL + V o menu di scelta rapida del mouse -> Incolla) la password anziché digitarla.

Vedere plunker demo for using (ngModelChange) here.