如何根据在 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"

查看我在此处创建的示例

Answer 2

我使用模板引用变量将我的复选框连接到按钮禁用状态：

<mat-checkbox #confirmed>Yes, I confirm</mat-checkbox>
<button mat-button [disabled]="!confirmed.checked">Delete</button>

Answer 3

如果您的按钮必须被禁用，如果您的表单无效，则使用

<button type="submit" [disabled]="!ngForm.valid">Submit</button>

或者

 <button type="submit" [disabled]="ngForm.invalid">Submit</button>

在您的 Html 中编辑

 <div class="container">
    <h1>Hero Form</h1>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
              required
              [(ngModel)]="ngForm.name" name="name">
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text"  class="form-control" id="alterEgo"
              [(ngModel)]="ngForm" name="alterEgo" (ngModelChange)="changed($event)" > 
      </div>

      <div class="form-group">
      <input type="checkbox" name="theInsuredType" value="theChkAcceptTerms"  [(ngModel)]="ngForm.theChkAcceptTerms"  (ngModelChange)="changed($event, 'theChkAcceptTerms')" > theChkAcceptTerms<br>
      <input type="checkbox" name="theInsuredType" value="theInsuredType"   [(ngModel)]="ngForm.theInsuredType" (ngModelChange)="changed($event, 'theInsuredType')"> theInsuredType<br>
      <input type="checkbox" name="theInsuredType" value="theReportInjury"  [(ngModel)]="ngForm.theReportInjury" (ngModelChange)="changed($event, 'theReportInjury')" > theReportInjury<br>
      <input type="checkbox" name="theInsuredType" value="oneMoreCondition"  [(ngModel)]="ngForm.oneMoreCondition" (ngModelChange)="changed($event, 'oneMoreCondition')" > theReportInjury<br>

      </div>


    <button type="submit" [disabled]="!canSubmit">Submit</button>


</div>

然后在你的 component.ts 文件中

  theChkAcceptTerms: boolean;
  theInsuredType: boolean;
  theReportInjury: boolean;
  oneMoreCondition: boolean;
  canSubmit: boolean;
  ngForm = {}

  changed(status: boolean, control: string ){

    switch(control) { 
        case 'theChkAcceptTerms': { 
           this.theChkAcceptTerms = status
            break; 
        } 
        case 'theInsuredType': { 
            this.theChkAcceptTerms = status
            break; 
        } 
        case 'theReportInjury': { 
            this.theReportInjury = status
            break; 
        } 
        case 'oneMoreCondition': { 
           this.oneMoreCondition = status
            break; 
        } 
        default: { 
            break; 
        } 
    }
    if(this.theChkAcceptTerms &&  this.theChkAcceptTerms  &&   this.theReportInjury &&  this.oneMoreCondition){
      this.canSubmit = true;
    }else{
      this.canSubmit = false;
    }


  }

Answer 4

如果 theChkAcceptTerms 是一个布尔变量，则尝试使用

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