,可以通过以下步骤实现:
ngForm
指令来创建一个表单,并使用ngModel
指令来绑定表单控件的值。<form #myForm="ngForm">
<div *ngFor="let option of options">
<label>
<input type="checkbox" name="checkboxOptions" [(ngModel)]="option.selected">
{{ option.label }}
</label>
</div>
</form>
export class MyComponent {
options = [
{ label: 'Option 1', selected: false },
{ label: 'Option 2', selected: false },
{ label: 'Option 3', selected: false }
];
}
ngModel
指令来双向绑定每个复选框的选中状态。<form #myForm="ngForm" (ngSubmit)="submitForm()">
<!-- 复选框代码省略 -->
<button type="submit">提交</button>
</form>
export class MyComponent {
// options数组和其他代码省略
submitForm() {
const selectedOptions = this.options.filter(option => option.selected);
console.log(selectedOptions);
}
}
这样,当用户选择复选框并提交表单时,会在控制台输出选中的复选框值。
对于Angular 8中创建具有动态表单的复选框,腾讯云提供了一些相关的产品和服务,如:
请注意,以上只是腾讯云提供的一些相关产品和服务示例,其他云计算品牌商也提供类似的产品和服务。
如果要自定义一个复选框,可以设置 如果要自定义一个复选框,可以设置 领取专属 10元无门槛券 手把手带您无忧上云开心档之Bootstrap4 自定义表单
扫码
相关资讯
活动推荐