title: My form don't found value and slide-toggle are always checked
body: <p>I have a problem with my forms.  In web all my slide-toggle are checked like in .<a href="https://i.stack.imgur.com/iWspk.png" rel="nofollow noreferrer">image</a></p>
  <p>I think that problem is in <code>patchFor(){}</code> Can you look my code please?
  I try this code:</p>
  <p>ts:</p>
  <pre><code>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 =&gt; {
              this.homeboxsp = homeboxsp;
              this.patchForm();
          }
      )
  }
  patchForm() {
      this.activeHomeboxPForm.patchValue({
          active: this.homeboxsp.map(x =&gt; x.active),
          homeboxpackage_id: this.homeboxsp.map(x =&gt; x.homeboxpackage_id)
      });
      console.log(this.homeboxsp.map(x =&gt; x.active))
      console.log(this.homeboxsp.map(x =&gt; x.homeboxpackage_id))
  }
  </code></pre>
  <p>console show my value. <a href="https://i.stack.imgur.com/ntKy1.png" rel="nofollow noreferrer">imageformconsole</a></p>
  <p>and html:</p>
  <pre><code>&lt;form [formGroup]=&quot;activeHomeboxPForm&quot; class=&quot;col s12&quot; materialize&gt;
      &lt;section class=&quot;example-section&quot;&gt;
          &lt;mat-slide-toggle formControlName=&quot;active&quot; value=&quot;active&quot;
          class=&quot;example-margin&quot;
          [color]=&quot;color&quot; [checked]=&quot;checked&quot;
          (click)=&quot;onActiveHomeboxP(item.homeboxpackage_id, item.active)&quot;&gt;
              {{item.active}}
          &lt;/mat-slide-toggle&gt;
      &lt;/section&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Please can you suggest me what is wrong in this code?  Thank you</p>
  <p>My exp: <a href="https://stackblitz.com/edit/angular-cw81dl?file=app%2Fservice.ts" rel="nofollow noreferrer"><strong>DEMO</strong></a></p>
  <p><strong>Update Code:</strong>
  ts code:</p>
  <pre><code>this.activeHomeboxPForm = new FormGroup({
    'active': new FormControl(true, Validators.required),
    'homeboxpackage_id': new FormControl('', Validators.required)
  
  });
    populateFormHomeboxP() {
      this.ws.homeboxPGetAll().subscribe(
        homeboxsp =&gt; {
          this.homeboxsp = homeboxsp.map((homeboxspp) =&gt; {
          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);
  
          });
        }
      )
    }
    
  </code></pre>
  <p>html code:</p>
  <pre><code>  &lt;tbody&gt;
        &lt;tr *ngFor=&quot;let item of homeboxsp; let i=index&quot;&gt;
         &lt;td&gt; 
          &lt;form [formGroup]=&quot;activeHomeboxPForm&quot; class=&quot;col s12&quot;&gt; 
            &lt;section class=&quot;example-section&quot;&gt;
              &lt;mat-slide-toggle  formControlName=&quot;active&quot; class=&quot;example-margin&quot; [checked]=&quot;item.active === '1'&quot;&gt; {{item.active}}
              &lt;/mat-slide-toggle&gt;
            &lt;/section&gt;
            &lt;/form&gt;
        &lt;/td&gt;
       &lt;/tr&gt;
      &lt;/tbody&gt;
  </code></pre>
  <p>image:
  <a href="https://i.stack.imgur.com/4AE3y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4AE3y.png" alt="enter image description here" /></a></p>
  <p>in console looks good, but in html doesn't display, active = 1 checked and active = 0 no checked. Please any idea how to implement?</p>