FormBuilder Angular 4中的禁用按钮答案

【问题标题】：Disable button in FormBuilder Angular 4FormBuilder Angular 4中的禁用按钮
【发布时间】：2017-11-08 12:49:11
【问题描述】：

我在 Angular 4 中使用 FormBuilder，当未填写所有字段时，我需要禁用提交按钮。

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>

现在按钮处于活动状态，这是不对的

【问题讨论】：

标签： javascript forms angular

【解决方案1】：

使用 disabled 属性检查表单验证状态

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

【讨论】：

【解决方案2】：

你需要明确地说出来：

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

【讨论】：

【解决方案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>

【讨论】：

在您的回答中提供一些上下文可能会有所帮助。稍微解释一下你的解决方案。