javascript 如何使用角度材料对多个复选框进行分组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50730205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to group several checkboxes with angular-material
提问by Bernard Pagoaga
Let's say I have a form to create a store. I want to input its name, and the days the store will be open.
假设我有一个表单来创建一个商店。我想输入它的名字，以及商店开张的日子。
So I'll have a form, with some inputs, and I want to group checkboxes in one mat-form-field.
所以我将有一个带有一些输入的表单，我想将复选框分组在一个 mat-form-field 中。
store-form-component.html :
store-form-component.html :
<form (ngSubmit)="onSaveStore()" [formGroup]="storeForm">
<mat-form-field>
<mat-label>Store name</mat-label>
<input matInput placeholder="store name" formControlName="name" required>
</mat-form-field>
<mat-form-field [formGroup]="storeForm.controls.availableDays>
<mat-checkbox *ngFor="let availableDay of storeForm.controls.availableDays.controls; let i=index" formControlName="{{i}}">{{i}}</mat-checkbox>
</mat-form-field >
</form>
store-form-component.ts :
store-form-component.ts ：
export class StoreFormComponent implements OnInit {
// Form Groups
storeForm: FormGroup;
constructor(
private formBuilder: FormBuilder
) {}
ngOnInit(): void {
this.initForm();
}
initForm(): void {
this.storeForm = this.formBuilder.group({
name: "",
availableDays: this.getAvailableDays()
});
}
getAvailableDays(): FormGroup {
return this.formBuilder.group({
monday: false,
tuesday: false,
wednesday: false,
thursday: false,
friday: false,
saturday: false,
sunday: false
});
}
It does not work and I can't figure why...
它不起作用，我不明白为什么......
edit : thanks to @g-tranter (and others SO posts), I could fix the issue. The final code looks like :
编辑：感谢@g-tranter（以及其他 SO 帖子），我可以解决这个问题。最终代码如下所示：
store-form-component.html :
store-form-component.html :
<form (ngSubmit)="onSaveStore()" [formGroup]="storeForm">
<div [formGroup]="storeForm.controls.availableDays">
<mat-checkbox *ngFor="let availableDay of days;" formControlName="{{availableDay}}">{{availableDay}}</mat-checkbox>
</div>
</form>
store-form-component.ts :
store-form-component.ts ：
export class StoreComponent implements OnInit {
// Form Groups
storeForm: FormGroup;
days: Array<string>;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.initForm();
// this is useful to iterate over the form group
this.days = Object.keys(this.storeForm.controls.availableDays.value);
}
initForm(): void {
this.storeForm = this.formBuilder.group({
name: "",
availableDays: this.getAvailableDays()
});
}
getAvailableDays(): FormGroup {
return this.formBuilder.group({
monday: false,
tuesday: false,
wednesday: false,
thursday: false,
friday: false,
saturday: false,
sunday: false
});
}
}
采纳答案by G. Tranter
You are setting the form control name to a numeric index:
您正在将表单控件名称设置为数字索引：
formControlName="{{i}}"
which doesn't exist in the form group.
在表单组中不存在。
You need to set it to "monday" etc. or set
您需要将其设置为“星期一”等或设置
[formControl]="availableDay"
回答by alandria
Maybe you need a mat-selection-list
也许你需要一个垫子选择列表
Check Angular Material documentation
Hope it helps you!
希望对你有帮助！
