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

Question

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

 <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>

在这里了解更多信息

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