我的表单找不到价值，并且始终会检查滑动切换

问题描述

我的表格有问题.在网络中，所有我的幻灯片切换都像在.图像

I have a problem with my forms. In web all my slide-toggle are checked like in .image

我认为问题出在patchFor(){}中，请问您能看看我的代码吗?我尝试以下代码:

I think that problem is in patchFor(){} Can you look my code please?I try this code:

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

控制台显示我的价值. imageformconsole

console show my value. imageformconsole

和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 in this code? Thank you

我的经验: 演示

My exp: DEMO

更新代码:ts代码:

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代码:

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

图片:

看起来不错，但是在html中没有显示，active = 1已选中，active = 0未选中.请知道如何实施吗?

in console looks good, but in html doesn't display, active = 1 checked and active = 0 no checked. Please any idea how to implement?

推荐答案

所有滑条都具有相同的formControlName

You've got the same formControlName for all your sliders

尝试设置唯一的控件名称

Try setting a unique control name

<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

这篇关于我的表单找不到价值，并且始终会检查滑动切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！