Angular 5+TypeScript：勾选复选框启用提交按钮实现咨询

没问题，我来帮你搞定这个功能，其实用Angular的双向绑定和属性绑定就能轻松实现，步骤如下：

1. 确保导入必要的模块 #

首先，你需要在模块文件（比如app.module.ts）中导入FormsModule——因为我们要用到ngModel做双向绑定；同时也要确保导入了Angular Material的相关模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须导入这个才能用ngModel
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule, MatButtonModule } from '@angular/material';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule, // 加入这个模块
    MatCheckboxModule,
    MatButtonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在组件类中定义状态变量 #

在你的组件TS文件（比如app.component.ts）里，定义一个布尔变量来存储复选框的勾选状态：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 初始化复选框为未勾选状态
  isTermsAgreed = false;
}

3. 修改模板文件 #

更新你的HTML模板，给复选框加上双向绑定，给按钮加上禁用状态的绑定：

<mat-checkbox [(ngModel)]="isTermsAgreed">I agree to the Terms & Conditions</mat-checkbox>
<button mat-button class="NxtBtnWrap" type="submit" [disabled]="!isTermsAgreed">Submit</button>

原理说明 #

• [(ngModel)]="isTermsAgreed"：这是Angular的双向绑定语法，会把复选框的勾选状态同步到组件的isTermsAgreed变量，反之亦然。
• [disabled]="!isTermsAgreed"：按钮的禁用状态绑定到isTermsAgreed的取反值——当用户没勾选复选框时，isTermsAgreed是false，!isTermsAgreed就是true，按钮禁用；勾选后isTermsAgreed变为true，!isTermsAgreed是false，按钮就启用了。

如果你的项目用的是响应式表单（Reactive Forms），也可以用FormControl来实现，但对于这个简单场景，模板驱动的方式更直接高效。

内容的提问来源于stack exchange，提问作者prasanna