0

I have an angular form, I use angular material stepper, I want the submit button to by disabled when the form is invalid and be automatically enabled on edit page if the form is valid

I tried to put both it did not work, the checkbox works it enables and disables

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

and my component:

 changeCheck(event) {
    this.disabledAgreement = !event.checked;
  }
Anas
  • 971
  • 13
  • 28

2 Answers2

1

Two things.

  1. You need to use [attr.disabled] instead of [disabled]

  2. The value that you bind to [attr.disabled] needs to be a string, and the values are 'disabled' and null. This is not a boolean.

GreyBeardedGeek
  • 29,460
  • 2
  • 47
  • 67
  • I put it as you said –  Oct 17 '19 at 02:27
  • but it disabled the button and can not be changed based on agreement checkbox –  Oct 17 '19 at 02:28
  • Hmm...Point 1 - why is this (angular or material) / do you have any relevant documentation link? Not had an issue in my own code using disabled directly – Andrew Allen Oct 17 '19 at 04:08
  • 1
    You are still binding a boolean. It needs to be null to enable the button. See https://stackoverflow.com/questions/50130924/angular-disabled-myboolean-not-working – GreyBeardedGeek Oct 17 '19 at 10:56
0

I assume you want the submit button to be disabled if the agreement checked box is not checked or if the form is disabled. If so, you need to use the || (Logical OR) operator instead of && (Logical AND), like so:

<button mat-raised-button [disabled]="disabledAgreement || thirdFormGroup.invalid" color="primary" matStepperNext type="submit" >Submit</button>
Manu Mathew
  • 140
  • 1
  • 8
  • I added did or operator but on update page it does keeps the button disabled –  Oct 24 '19 at 03:08