Angular4:只要表单未经验证,禁用按钮

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

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

component.html:

Valider

=>有效

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

component.html:

Download

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

private buttonSubmitEnabled: boolean = false; 

sendForm() {
    this.buttOnSubmitEnabled=true;
}

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

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

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

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