при установке флажка включить кнопку отправки - угловая 5

Question

При установке флажка я должен включить кнопку отправки. Я делаю это в угловых 5 и машинописи. Вот мой существующий код

 <mat-checkbox>I agreeTerms & Conditions</mat-checkbox>
<button  mat-button class="NxtBtnWrap"  type="submit" >Submit</button>

Answer 1

В ответе @SergioEscudero, приведенном выше, метод

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

не будет работать, если вы не измените его на

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

Answer 2

Вы можете использовать событие изменения, чтобы узнать, можете ли вы включить или нет, например,

Ts файл:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  disabledAgreement: boolean = true;
  changeCheck(event){
    this.disabledAgreement = !event.checked;
  }
}

Шаблон:

<mat-checkbox (change)="changeCheck($event)">I agreeTerms & Conditions</mat-checkbox>
<button [disabled]="disabledAgreement" mat-button class="NxtBtnWrap"  type="submit" >Submit</button>

Для получения дополнительной информации здесь

Или вы можете сделать это с помощью ngModel:

Ts файл:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  checked: boolean = false;
}

шаблон:

<mat-checkbox [(ngModel)]="checked">I agreeTerms & Conditions</mat-checkbox>
<button [disabled]="!checked" mat-button class="NxtBtnWrap"  type="submit" >Submit</button>

Помните, что вам нужно импортировать в модуль модуля формы, чтобы использовать ngModel:

import { FormsModule } from '@angular/forms';

и добавьте его в импорт:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatCheckboxModule,
    MatButtonModule,
    FormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }