小编Ber*_*aga的帖子

如何使用角度材料对多个复选框进行分组

假设我有一个创建商店的表单。我想输入名称,以及商店的营业时间。

因此,我将拥有一个带有一些输入的表单,并且我想将一个复选框组合在一个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>
Run Code Online (Sandbox Code Playgroud)

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: …
Run Code Online (Sandbox Code Playgroud)

javascript angular-material angular

6
推荐指数
2
解决办法
7433
查看次数

标签 统计

angular ×1

angular-material ×1

javascript ×1