Javascript 如何使用角度材质将多个复选框分组

假设我有一个创建商店的表单。我想输入它的名字，以及商店的营业日期

我有一个表单，有一些输入，我想把复选框分组到一个mat表单字段中

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>

<form (ngSubmit)="onSaveStore()" [formGroup]="storeForm">
  <div [formGroup]="storeForm.controls.availableDays">
    <mat-checkbox *ngFor="let availableDay of days;" formControlName="{{availableDay}}">{{availableDay}}</mat-checkbox>
  </div>
</form>

它不起作用，我不明白为什么

编辑：多亏了@g-tranter（以及其他人的帖子），我可以解决这个问题。最后的代码如下所示：

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>

<form (ngSubmit)="onSaveStore()" [formGroup]="storeForm">
  <div [formGroup]="storeForm.controls.availableDays">
    <mat-checkbox *ngFor="let availableDay of days;" formControlName="{{availableDay}}">{{availableDay}}</mat-checkbox>
  </div>
</form>

{{availableDay}}

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
    });
  }

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
    });
  }
}

导出类StoreComponent实现OnInit{
//组队
storeForm:FormGroup；
天数：数组；
构造函数（私有formBuilder:formBuilder）{}
ngOnInit（）：void{
this.initForm（）；
//这对于迭代表单组很有用
this.days=Object.keys（this.storeForm.controls.availableDays.value）；
}
initForm（）：void{
this.storeForm=this.formBuilder.group({
姓名：“，
availableDays:this.getAvailableDays（）
});
}
getAvailableDays（）：FormGroup{
返回此.formBuilder.group({
星期一：错，
星期二：错，
星期三：错，
星期四：错，
星期五：错，
星期六：错，
星期日：假
});
}
}

也许您需要一份垫子选择列表

检查

---

希望它能帮助你

您正在将表单控件名称设置为数字索引：

formControlName="{{i}}"

表单组中不存在的

您需要将其设置为“星期一”等，或者

[formControl]="availableDay"

---

不幸的是，我无法将此mat选择列表绑定到表单。但是@g-tranter给了我一个很好的提示来解决我的问题。谢谢，它帮助我解决了我的问题。我还考虑了其他问题（因为formGroup是一个对象，所以无法迭代）。我将编辑我的第一篇文章，把最后的代码。