Javascript 在FormBuilder 4中禁用按钮

Javascript 在FormBuilder 4中禁用按钮,javascript,forms,angular,Javascript,Forms,Angular,我在Angular 4中使用FormBuilder,当未填充所有字段时,我需要禁用submit按钮 组件。ts public loginForm = this.fb.group({ email: ['', Validators.required], password: ['', Validators.required],}); constructor( public fb: FormBuilder ) { } component.html <form [formGroup]="log

我在Angular 4中使用FormBuilder,当未填充所有字段时,我需要禁用submit按钮

组件。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>

登录
现在按钮处于活动状态,这是不对的


你需要明确地说:

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

您需要明确地说:

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

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

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

登录

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

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

登录

登录

登录

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