Question

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

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

component.html ：

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

=>可行

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

component.html ：

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

为此，在 component.ts 中，我将布尔值初始化为false，并且当单击按钮commit（方法sendForm（））时，它变为true：

private buttonSubmitEnabled: boolean = false; 

sendForm() {
    this.buttonSubmitEnabled=true;
}

当我第一次填写表格时，它可以正常工作=>单击提交按钮，下载按钮变为启用状态。但是，在第一次之后，如果我决定更改必填字段，并且该表单返回无效表单，则会禁用2个按钮（逻辑上），但是当我正确填写字段时，“下载”按钮将变为启用状态。我理解了这个问题，因为遵守了启用按钮下载的两个条件：表单有效AND按钮提交单击一次。

因此，如果我希望每次都能正常工作，我认为有必要在每次表单无效时都将布尔值“ buttonSubmitEnabled”设置为false，但是我不知道该怎么做。

Answer 1

FormGroup具有valueChanges的{{1}}属性。每次表单更改都会触发此可观察到的事件。您可以使用它来重置提交布尔值。

subscribe

Answer 2

在这些输入字段的键入事件中，调用函数disableDownload()

<input (keyup)="disableDownload()">

在disableDownload（）中，只需使下载按钮SubmitEnabled false

disableDownload() {
   this.buttonSubmitEnabled = false;    
}

提交表单后，仅将 buttonSubmitEnabled 设置为真

角度4：只要表单未通过验证，就禁用按钮

2 个答案: