你能告诉我一种在角度 2 中获取复选框值的方法
这是我的代码
https://stackblitz.com/edit/angular-grtvc7?file=src%2Fapp%2Fapp.module.ts
我知道如何使用这样的模板变量来做到这一点的一种方法
<mat-checkbox #ch>Check me!</mat-checkbox>
checkCheckBoxvalue(ele){
console.log(ele.checked)
}
我想知道实现这个功能的另一种方法
【问题讨论】：
标签： javascript angular
你需要使用change事件
<mat-checkbox (change)="checkCheckBoxvalue($event)">Check me!</mat-checkbox>
checkCheckBoxvalue(event){
console.log(event.checked)
}
您可以使用两种方式的数据绑定，如下所述 -
<input type="checkbox" name="myData" [(ngModel)]="isChecked">
您也可以使用局部变量并在控制器端获取值，如下所示 -
<input type="checkbox" name="myData" #myCheckbox>
@ViewChild('myCheckbox') myCheckbox;
console.log(myCheckbox, 'Value of checkbox');
其他方式是你可以使用formControl，它可以是模型驱动的表单或模板驱动的表单。
【讨论】：
使用更改 event.target.checked。
<mat-checkbox (change)="checkCheckBoxvalue($event)">Check me!</mat-checkbox>
checkCheckBoxvalue(event){
console.log(event.target.checked)
}
【讨论】：
将 [ngModel] 绑定到复选框
<input type="checkbox" name="checkbox" [(ngModel)]="isChecked">
const isChecked : boolean;【讨论】：
您可以使用ngModel，因为您已经导入了FormsModule。这是推荐的方式。
检查我的stackblitz
这里还有一些代码
<mat-checkbox [(ngModel)]="checkBoxValue" [ngModelOptions]="{standalone: true}">Check me!</mat-checkbox>
<button (click)="checkCheckBoxvalue()">check check box value</button>
checkBoxValue: any = false;
checkCheckBoxvalue(){
console.log(this.checkBoxValue)
}
【讨论】：
使用模板驱动的表单
1.创建复选框
我们需要在复选框中使用 ngModel 作为属性，以便它们可以使用 NgForm 指令注册。
创建复选框：
<input type="checkbox" name="tc" ngModel>
2。在提交表单时获取值
当我们提交表单并假设表单值作为表单存储在 NgForm 的实例中时，我们可以使用 form.controls[...] 获取复选框值，如下所示。
this.user.isTCAccepted = form.controls['tc'].value;
【讨论】：
您可以直接在模板中获取 mat-checkbox 的状态，如下所示，例如根据复选框的状态有条件地显示表单控件：
<mat-checkbox
#checkbox
formControlName="hybridPlugin"
>Checkbox
</mat-checkbox>
<mat-form-field *ngIf="checkbox.checked">
// ...
</mat-form-field>
这通过使用模板变量#checkbox 来工作。
【讨论】：
因为您已经有一个本地引用 #c，您可以在需要时在组件 ts 文件中使用它
import {ViewChild} from '@angular/core';
@ViewChild('c') checkbox;
// when needed
//this.checkbox.value
您可以在表单提交或复选框本身的更改事件中调用它。
【讨论】：