[英]Disable button in FormBuilder Angular 4
我在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>
现在按钮处于活动状态,这是不对的
您需要明确地说:
<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.invalid || loginForm.pristine">Log in</button>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.