如果表单无效或为空，则禁用复选框，如果有效则启用答案

【问题标题】：Disable checkbox if form is invalid or empty and enable if valid如果表单无效或为空，则禁用复选框，如果有效则启用
【发布时间】：2020-02-25 04:53:05
【问题描述】：

我有一个带有几个文本字段的角形表格。我在字段下方有一个复选框。

如果表单中的字段为空或无效，我想禁用该复选框。

checkbox的html代码如下。我试过[disabled] = "form.invalid"。当我以这种方式使用它时，复选框被禁用并出现错误消息。

另外，我尝试了这种在 .ts 文件中添加函数 [disabled]="!areDetailsInvalid()" 的方法。

 public updateValidity(_event: Event) {
    setTimeout(() => {
        this.formIsValid = this.form.valid;
    }, 0);
}
 public areDetailsInvalid()
{
    return this.formIsValid;
}   


<mat-checkbox disableRipple class="head checkboxlabel mat-warn" [checked]="saveAsCheckbox" [disabled]="!areDetailsInvalid()" (change)="toggleSaveAs()">
                                        <span class="save-as-checkbox-label">Check to save {{saveAsLabel}} information</span>
                                    </mat-checkbox>

如果表单无效，复选框将被禁用。但如果表单有效，则不会再次启用。

【问题讨论】：

你能为此创建一个 stackblitz.com 吗？

标签： asp.net-mvc user-interface angular-forms

【解决方案1】：

希望这个例子对你有所帮助。

如果这能解决您的问题，请告诉我。

Stackblitz => https://stackblitz.com/edit/angular-enhthy

【讨论】：