如何根据 Angular 中选中的复选框启用/禁用按钮

Question

我正在尝试向我的 Angular 应用程序表单添加验证。

我的表格的第一部分包含：

• 1 个复选框
• 2 个单选按钮组
• 1 个按钮（导航到表单的下一部分）

在用户选中复选框并从两个单选按钮组中选择一个选项之前，该按钮将被禁用。

这是我的按钮的代码：

<button
    [disabled]="
        theChkAcceptTerms.invalid || 
        theInsuredType.invalid || 
        theReportInjury.invalid
        ">

这是我的复选框的代码：

<checkbox
    id="accept"
    heading="I accept"
    name="accept"
    value="accept"
    [(ngModel)]="chkAcceptTerms"
    required
    #theChkAcceptTerms="ngModel">
</checkbox>

目前，当页面加载时，该按钮被禁用。仅当我选中复选框并在两个单选组中选择一个选项后，它才会启用。

但是，如果我取消选中该复选框，则该按钮不会被禁用。

有人可以告诉我，如果未选中该复选框，如何禁用上述按钮。多谢！

Answer 1

您需要为控件获取两种方式的数据绑定，并在disabled属性中检查它们，如下所示

[disabled]="!checkBox || !radioGroup1 || !radioGroup2"

在这里查看我创建的示例