My form is not found and slide switches are always checked

Question

I have a problem with my forms. On the Internet, all of my slide switches are checked as. picture

I think the problem is, patchFor(){}can you see my code, please? I am trying this code:

c

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

the console will show my value. imageformconsole

and 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>

Please can you suggest me what is wrong with this code? Thanks you

My exp: DEMO

Update code: 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>

picture:

in the console it looks good, but it doesn’t appear in html, active = 1 checked and active = 0 no checked. Think about how to implement?

Answer 1

formControlName

<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

Answer 2

, , [checked], , , active , -

<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>

Answer 3

DEMO

, : myform, - patchForm:

[formGroup]="myform[i]"

@Component({
  selector: 'my-app',
  template: `  
    <div *ngFor="let item of homeboxsp; let i = index">
      <form [formGroup]="myform[i]" class="col s12">
          <section class="example-section">
            <mat-slide-toggle formControlName="active" value="active" class="example-margin" [color]="color" [checked]="item.active" (click)="onActiveHomeboxP()"> {{item.active}}
          </mat-slide-toggle>
          </section>
        </form>
   </div>
  `
})

myForm:

myform: FormGroup[];

constructor(public service: Service) {
...
    this.myform = [
      new FormGroup(
        {
         'active': new FormControl('', Validators.required),
         'homeboxpackage_id': new FormControl('', Validators.required)
        }),
      new FormGroup(
       {
         'active': new FormControl('', Validators.required),
         'homeboxpackage_id': new FormControl('', Validators.required)
       }),
      new FormGroup(   
        {
          'active': new FormControl('', Validators.required),
          'homeboxpackage_id': new FormControl('', Validators.required)
        })
      ];
}

, , patchForm:

patchForm() {
  this.homeboxsp.forEach((val,i) => {
    this.myform[i].patchValue(
    {active: val.active == "1", homeboxpackage_id: val.homeboxpackage_id}
  )
});