web-dev-qa-db-fra.com

Comment regrouper plusieurs cases à cocher avec un matériau angulaire

Disons que j'ai un formulaire pour créer un magasin. Je veux entrer son nom et les jours d'ouverture du magasin.

Je vais donc avoir un formulaire, avec quelques entrées, et je veux regrouper les cases à cocher dans un champ de formulaire 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>

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

Ça ne marche pas et je n'arrive pas à comprendre pourquoi ...

edit: grâce à @ g-tranter (et autres SO posts), j'ai pu résoudre le problème. Le code final ressemble à:

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

Vous définissez le nom du contrôle de formulaire sur un index numérique:

formControlName="{{i}}"

qui n'existe pas dans le groupe de formulaires.

Vous devez le régler sur "lundi", etc. ou définir

[formControl]="availableDay"
2
G. Tranter

Peut-être avez-vous besoin d'une liste de sélection de tapis

Vérifier documentation du matériau angulaire

J'espère que cela vous aide!

1
alandria