Deaktivieren Sie die Schaltfläche in FormBuilder Angular 4

Question

Ich benutze FormBuilder in Angular 4 und ich muss die Schaltfläche zum Senden deaktivieren, wenn nicht alle Felder ausgefüllt.

component.ts

public loginForm = this.fb.group({ 
email: ['', Validators.required], 
password: ['', Validators.required],}); 

constructor(
public fb: FormBuilder 
) { } 

component.html

<form [formGroup]="loginForm" (ngSubmit)="doLogin($event)"> 
    <input formControlName="email" type="email" placeholder="Your email"> 
    <input formControlName="password" type="password" placeholder="Your password"> 
    <button type="submit">Log in</button> 
</form> 

Und jetzt Taste aktiv ist, das ist nicht richtig

Answer 1

Sie müssen es ausdrücklich sagen:

<button type="submit" [disabled]="loginForm.invalid">Log in</button> 

Answer 2

Verwenden deaktiviert Eigenschaft mit

<form [formGroup]="loginForm" (ngSubmit)="doLogin($event)"> 
    <input formControlName="email" type="email" placeholder="Your email"> 
    <input formControlName="password" type="password" placeholder="Your password"> 
    <button type="submit" [disabled]="!loginForm.valid">Log in</button> 
</form> 

Formularvalidierung Statusprüfung