Wyłącz przycisk, gdy wejście jest puste w Angular 2

Question

Chcę sprawdzić, czy wejście jest puste.

• Jeśli nie jest pusty, włącz przycisk wysyłania.
• Jeśli jest pusty, wyłącz przycisk Wyślij .

Próbowałem (oninput) i (onchange), ale one nie działają.

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

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

Answer 1

W tym przypadku użyłbym walidatorów formularzy. Dodałbym "wymaganą" walidację do twoich danych wejściowych i użyję stanu globalnego twojego formularza do wyłączenia/włączenia twojego przycisku.

Dzięki podejściu kierowanym szablonu, nie ma kodu, aby dodać do swojego urządzenia, tylko rzeczy w swoim szablonie ...

Oto próbka poniżej:

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

Answer 2

Aby powiązać funkcje z wydarzeniami, nie trzeba ich poprzedzać prefiksem on. Po prostu umieść wydarzenie.

Na przykład, jeśli chcesz obsługiwać keydown (plunker demo):

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

---

Ale w konkretnym przypadku, ponieważ już używasz ngModel jesteś lepiej wyłączyć za pomocą (ngModelChange):

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

Ponieważ wykryje zmiany, gdy użytkownik wklei (przez CTRL + V lub kliknij prawym przyciskiem myszy menu -> Wklej) hasło zamiast go wpisywać.

Zobacz plunker demo for using (ngModelChange) here.