angular - Mein Formular findet keinen Wert und Slide-Toggle ist immer aktiviert

Ich habe ein Problem mit meinen Formularen. Im Web sind alle meine Schiebeschalter wie in .image aktiviert.

Ich denke, dass das Problem in patchFor(){} liegt. Können Sie bitte meinen Code ansehen? Ich habe diesen Code ausprobiert:

ts :

homeboxsp: Package[] = [];   
activeHomeboxPForm: FormGroup;

this.activeHomeboxPForm = this.fb.group({
  'active': new FormControl('', Validators.required),
  'homeboxpackage_id': new FormControl('', Validators.required)

}); 

populateFormHomeboxP() {
    this.hsP.homeboxPGetAll().subscribe(
        homeboxsp => {
            this.homeboxsp = homeboxsp;
            this.patchForm();
        }
    )
}
patchForm() {
    this.activeHomeboxPForm.patchValue({
        active: this.homeboxsp.map(x => x.active),
        homeboxpackage_id: this.homeboxsp.map(x => x.homeboxpackage_id)
    });
    console.log(this.homeboxsp.map(x => x.active))
    console.log(this.homeboxsp.map(x => x.homeboxpackage_id))
}

Konsole zeigt meinen Wert. Bildformularkonsole

und HTML:

<form [formGroup]="activeHomeboxPForm" class="col s12" materialize>
    <section class="example-section">
        <mat-slide-toggle formControlName="active" value="active"
        class="example-margin"
        [color]="color" [checked]="checked"
        (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active)">
            {{item.active}}
        </mat-slide-toggle>
    </section>
</form>

Können Sie mir bitte sagen, was an diesem Code falsch ist? Vielen Dank

Meine Erfahrung: DEMO

Code aktualisieren: ts code:

this.activeHomeboxPForm = new FormGroup({
  'active': new FormControl(true, Validators.required),
  'homeboxpackage_id': new FormControl('', Validators.required)

});
  populateFormHomeboxP() {
    this.ws.homeboxPGetAll().subscribe(
      homeboxsp => {
        this.homeboxsp = homeboxsp.map((homeboxspp) => {
        this.activeHomeboxPForm.controls['active'].setValue(homeboxspp.active),
        this.activeHomeboxPForm.controls['homeboxpackage_id'].setValue(homeboxspp.homeboxpackage_id)
          console.log(homeboxspp)
          console.log(homeboxspp.active)
          console.log(homeboxspp.homeboxpackage_id)
          return new HomeboxP(homeboxspp);

        });
      }
    )
  }
  

HTML-Code:

  <tbody>
      <tr *ngFor="let item of homeboxsp; let i=index">
       <td> 
        <form [formGroup]="activeHomeboxPForm" class="col s12"> 
          <section class="example-section">
            <mat-slide-toggle  formControlName="active" class="example-margin" [checked]="item.active === '1'"> {{item.active}}
            </mat-slide-toggle>
          </section>
          </form>
      </td>
     </tr>
    </tbody>

Bild :

In der Konsole sieht es gut aus, aber im HTML wird es nicht angezeigt, active=1 ist angehakt und active=0 ist nicht angehakt. Habt ihr eine Idee, wie man das umsetzen kann?

Antwort #1

Du hast denselben formControlName für alle deine Schieberegler

Versuche, einen eindeutigen Steuerungsnamen festzulegen

<div *ngFor="let item of homeboxsp;let index=i">
 <form [formGroup]="myform" class="col s12">
          <section class="example-section">
            <mat-slide-toggle formControlName="active-{{i}}" 

https://stackblitz.com/edit/angular-afrebm?file=app/app.component.html

Antwort #2

Ob eine Folie ausgewählt ist oder nicht, wird mit der [checked]-Eigenschaft definiert, also wenn Sie möchten, dass Ihre Schieberegler die active-Eigenschaft Ihrer Elemente widerspiegeln, benötigen Sie etwas wie

<form [formGroup]="activeHomeboxPForm" class="col s12" materialize>
    <section class="example-section">
        <mat-slide-toggle formControlName="active" value="active"
        class="example-margin"
        [color]="color" [checked]="item.active"
        (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active)">
            {{item.active}}
        </mat-slide-toggle>
    </section>
</form>

BEARBEITEN

Funktionierende Demo