禁用FormBuilder Angular 4中的按钮

Question

I use FormBuilder in Angular 4 and i need to disable submit button, when not filled all the fields.

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>

And now button is active, that is not right

Answer 1

您需要明确地说：

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

Answer 2

Use disabled property with checking form validation state

<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>

Answer 3

<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.invalid || loginForm.pristine">Log in</button>
</form>