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

您需要为控件获取两种方式的数据绑定，并在const adorableMe = firebase.auth().currentUser collection('user').where(/* they might think I'm a cutie pie */).get().then(snapshot => { // filter result to exclude the (tiny!) set of users who don't fancy me return snapshot.docs.filter(doc => !doc.data().dislikes.includes(adorableMe.id)) })属性中将其检查为

disabled

查看我创建的示例HERE

Answer 2

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

<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 3

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

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

Answer 4

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

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

如何基于Angular中的复选框启用/禁用按钮

4 个答案: