Question

选择复选框后，我应启用提交按钮。我是在角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>

了解更多信息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 { }

Answer 2

在上述@SergioEscudero答案中，方法

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

除非将其更改为

，否则将不起作用

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

Answer 3

这非常简单：确保您的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>

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

3 个答案: