typescript - 在选择复选框时启用提交按钮 - 角度 5

Question

在选中复选框时，我应该启用提交按钮。我正在用 angular 5 和 typescript 来做。这是我现有的代码

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

Answer 1

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

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>

了解更多信息 here

或者你可以用 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 { }