web-dev-qa-db-ja.com

角材で複数のチェックボックスをグループ化する方法

ストアを作成するフォームがあるとします。名前と、店舗の営業日を入力します。

そこで、いくつかの入力を含むフォームを作成し、1つの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
    });
  }
}
javascriptangularangular-material
6
Bernard Pagoaga

フォームコントロール名を数値インデックスに設定しています：

formControlName="{{i}}"

フォームグループには存在しません。

「月曜日」などに設定するか、設定する必要があります

[formControl]="availableDay"
2
G. Tranter

たぶんあなたはマット選択リストが必要です

チェック Angular Material documentation

それがあなたを助けることを願っています！

1
alandria