![](/img/trans.png)
[英]Default Browser Checkboxes Showing Up in Addition to Angular-Material md-checkboxes
[英]How to group several checkboxes with angular-material
假設我有一個表單來創建商店。 我想輸入它的名字,以及商店開放的日子。
所以我會有一個表單,有一些輸入,我想在一個mat-form-field中分組復選框。
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:
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
});
}
它不起作用,我無法理解為什么......
編輯:感謝@ g-tranter(以及其他SO帖子),我可以解決這個問題。 最終代碼如下:
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:
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
});
}
}
您正在將表單控件名稱設置為數字索引:
formControlName="{{i}}"
表單組中不存在。
您需要將其設置為“星期一”等或設置
[formControl]="availableDay"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.