Typescript 选中复选框时启用提交按钮-角度5

选中复选框后，我应启用“提交”按钮。我正在用angular 5和打字脚本做这件事。这是我现有的代码

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

---

例如，您可以使用更改事件来了解是否可以启用

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>

模板：

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

并将其添加到导入中：

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

---

例如，您可以使用更改事件来了解是否可以启用

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>

模板：

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

并将其添加到导入中：

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

---

在上面的@SergioEscudero答案中，方法

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

除非你把它改成

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

---

在上面的@SergioEscudero答案中，方法

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

除非你把它改成

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

---

其实很简单：确保您的TS定义了一个要使用的FormGroup

ngOnInit() {
  this.dialogFormGroup = formBuilder.group( {
    confirmAction: [false]
  } );
}

然后将复选框绑定到该FormControl，最后根据复选框控件值在按钮上定义disabled属性：

<form  [formGroup]="dialogFormGroup">
  <mat-checkbox formControlName="confirmAction">I agreeTerms & Conditions</mat-checkbox>
  <button mat-button class="NxtBtnWrap" type="submit" [disabled]="!dialogFormGroup.controls.confirmAction.value">Submit</button>
</form>

---

其实很简单：确保您的TS定义了一个要使用的FormGroup

ngOnInit() {
  this.dialogFormGroup = formBuilder.group( {
    confirmAction: [false]
  } );
}

然后将复选框绑定到该FormControl，最后根据复选框控件值在按钮上定义disabled属性：

<form  [formGroup]="dialogFormGroup">
  <mat-checkbox formControlName="confirmAction">I agreeTerms & Conditions</mat-checkbox>
  <button mat-button class="NxtBtnWrap" type="submit" [disabled]="!dialogFormGroup.controls.confirmAction.value">Submit</button>
</form>

---

到目前为止您尝试了什么？到目前为止您尝试了什么？只是想知道：为什么不将复选框的NgModel绑定到hasUserAcceptedAgreement之类的属性，然后基于此启用/禁用按钮？更改事件可以工作，但如果您可以使用模型绑定并避免事件，那么在Angular中处理表单时，这似乎是首选方法。您如何添加模型绑定？只是想知道：为什么不将复选框的NgModel绑定到hasUserAcceptedAgreement之类的属性，然后基于此启用/禁用按钮？更改事件可以工作，但如果您可以使用模型绑定并避免事件，则在处理Angular中的表单时，这似乎是首选方法。您如何添加模型绑定？取决于Angular Material Design version Angular Material Design version的待定