title: mat-checkbox: The checkboxes are checked by default and affect each other?
body: <p>I have 7 checkboxes in my <code>RactiveForm</code>. This is how I am generating them using <code>FormArray</code>:</p>
  <p>ts:</p>
  <pre><code>  weekDaysDe: string[] = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
  
    taskForm: FormGroup = this.formBuilder.group({
      weekDays: this.formBuilder.array([
        this.formBuilder.control(false),
        this.formBuilder.control(false),
        this.formBuilder.control(false),
        this.formBuilder.control(false),
        this.formBuilder.control(false),
        this.formBuilder.control(false),
        this.formBuilder.control(false),
      ]),
    });
  
  
  </code></pre>
  <p>html:</p>
  <pre><code>      &lt;!-- weekdays --&gt;
        &lt;div class=&quot;task-form-control&quot; *ngIf=&quot;isRecurrent&quot;&gt;
          &lt;mat-label&gt;Tage&lt;/mat-label&gt;
          &lt;div class=&quot;weekdays&quot; formArrayName=&quot;weekDays&quot;&gt;
            &lt;mat-checkbox
              *ngFor=&quot;
                let weekDay of taskForm.get('weekDays').value;
                let i = index
              &quot;
              color=&quot;primary&quot;
              labelPosition=&quot;before&quot;
              [formControlName]=&quot;i&quot;
              &gt;{{ weekDaysDe[i] }}&lt;/mat-checkbox
            &gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p>The checkboxes are rendered as expected but there are two problems:</p>
  <ol>
  <li>They are all checked at first</li>
  <li>They check/uncheck each other. For example when I check the first one the last one also get checked</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/6wSPr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6wSPr.jpg" alt="enter image description here" /></a></p>
  <p>What have I done wrong?</p>