html - Angular 4 : disable button as long as form not validated

Question

我有一个包含必填字段和 2 个按钮的表单:第一个按钮用于提交表单，另一个按钮用于下载文件。

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

组件.html :

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

=> 有效

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

组件.html :

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

为此，在 component.ts 中，我将一个 bool 值初始化为 false，并在单击提交按钮时变为 true(方法 sendForm()):

private buttonSubmitEnabled: boolean = false; 

sendForm() {
    this.buttonSubmitEnabled=true;
}

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

所以，如果我想让它每次都起作用怎么办，我认为有必要在每次表单无效时将 bool 值“buttonSubmitEnabled”设置为 false，但我不知道该怎么做。

Answer 1

FormGroup 有一个 valueChanges 属性，您可以订阅。每次表单更改都会触发此可观察对象。您可以使用它来重置提交 bool 值。

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