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

```