时间戳

首页 > 解决方案 > Angular 4：只要表单未验证，就禁用按钮

html - Angular 4：只要表单未验证，就禁用按钮

问题描述

我有一个带有必填字段和 2 个按钮的表单：第一个按钮提交表单，另一个按钮是下载文件。

一方面，只要表单无效，提交按钮就会被禁用（当表单有效时它会启用）：

组件.html：

<button type="submit" [disabled]="!formGroupTest.valid" >Valider</button>

=> 它有效

另一方面，只要表单无效，“下载”按钮就会被禁用，并在以下情况下启用：表单有效和按钮提交被点击：

组件.html：

<button [disabled]="!formGroupTest.valid || !buttonSubmitEnabled">Download</button>

为此，在component.ts中，我将布尔值初始化为 false，并在单击按钮提交时变为 true（方法 sendForm()）：

private buttonSubmitEnabled: boolean = false; 

sendForm() {
    this.buttonSubmitEnabled=true;
}

当我第一次填写表格时，它工作得很好=>我点击提交按钮，下载按钮变为启用。但是，在第一次之后，如果我决定更改必填字段并将表单返回为无效，则 2 个按钮被禁用（逻辑上），但是当我正确填写字段时，“下载”按钮变为启用。我理解这个问题，因为启用按钮下载的两个条件得到尊重：表单有效和按钮提交点击一次。

所以，如果我希望它每次都工作，我认为每次表单无效时都需要将布尔“buttonSubmitEnabled”设置为false，但我不知道该怎么做。

标签： htmlangularforms

解决方案

FormGroup有一个valueChanges属性，你可以subscribe。每次表单更改都会触发这个 observable。您可以使用它来重置提交布尔值。

this.myForm.valueChanges.subscribe(x => this.buttonSubmitEnabled = false);

推荐阅读