首页 文章

Angular 4：只要表单未经验证，禁用按钮

提问于
浏览 次
2

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

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

component.html ：

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

=>有效

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

component.html ：

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

为此，在 component.ts 中，我在false处初始化一个布尔值，当按钮提交单击时它变为true（方法sendForm（））：

private buttonSubmitEnabled: boolean = false; 

sendForm() {
    this.buttonSubmitEnabled=true;
}

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

那么，如果我希望每次都能使用它，我认为每次表单无效时都必须将布尔“buttonSubmitEnabled”置为false，但我不知道该怎么做 .

html angular forms

2 回答

  • 2

    FormGroup 有 valueChanges 属性，您可以 subscribe 来 . 每个表单更改都会触发此可观察对象 . 您可以使用它来重置提交布尔值 .

    this.myForm.valueChanges.subscribe(x => this.buttonSubmitEnabled = false);
    回复于
  • 5

    在那些输入字段的keyup事件中调用函数 disableDownload()

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

    在disableDownload（）里面，只需下载buttonSubmitEnabled false

    disableDownload() {
   this.buttonSubmitEnabled = false;    
}

    只有在提交表单后才能使 buttonSubmitEnabled 为true

    回复于

相关问题