Question

我有一个角形表单，我使用角形材质步进器，我希望在表单无效时禁用提交按钮，如果表单有效则在编辑页面上自动启用

我试图将两者都无效，复选框可以启用和禁用

 <mat-step>
  <form [formGroup]="thirdFormGroup" #programAvailability="ngForm" (ngSubmit)="form3()">
    <ng-template matStepLabel>Confirm & submit</ng-template>
    <mat-checkbox formControlName="agreementCtrl" (change)="changeCheck($event)"> I agree to....</mat-checkbox>
    <div>
      <button mat-raised-button  matStepperPrevious>Back</button> &nbsp;
      <button mat-raised-button [disabled]="disabledAgreement && thirdFormGroup.invalid" color="primary" matStepperNext type="submit" >Submit</button>
      &nbsp;
      <button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
    </div>
  </form>
</mat-step>

和我的组件：

 changeCheck(event) {
    this.disabledAgreement = !event.checked;
  }

Answer 1

两件事。

您需要使用[attr.disabled]而不是[disabled]
您绑定到[attr.disabled]的值必须是字符串，并且值是'disabled'和null。这不是布尔值。

Answer 2

如果未选中协议复选框或表单已禁用，我假设您希望禁用提交按钮。如果是这样，则需要使用||。（逻辑OR）运算符，而不是&&（逻辑AND）运算符，就像这样：

<button mat-raised-button [disabled]="disabledAgreement || thirdFormGroup.invalid" color="primary" matStepperNext type="submit" >Submit</button>

根据复选框禁用提交按钮，并且表单验证不起作用

2 个答案: