Кнопка отправки отключена на основе флажка и проверки формы не работает

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

Две вещи.

1. Вам нужно использовать [attr.disabled] вместо [отключено]

2. Значение, которое вы связываете[attr.disabled] должна быть строкой, а значения 'disabled' и null. Это не логическое значение.

Answer 2

Я предполагаю, что вы хотите отключить кнопку отправки, если флажок соглашения не установлен или форма отключена. Если это так, вам нужно использовать ||Оператор (логическое ИЛИ) вместо && (Логическое И), например:

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