在选中复选框时,我应该启用提交按钮。我正在用 angular 5 和 typescript 来做。这是我现有的代码
<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>
了解更多信息 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 { }
关于typescript - 在选择复选框时启用提交按钮 - 角度 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50236715/