title: Angular 7 + Material: While using multiple mat-checkbox inside form data is loading into fields only after interaction with them
body: <p>I have encountered a probem while trying to implement a simple user setting page in angular using material style. I created a form and put two mat-checkbox boxes as well as matInput field there. The values in the fields and the state of checkboxes should be displayed based on previous data. However, data is not loaded into them until I start interacting with the fields. Furtermore, mat-checkbox state does not change into the real one and they remain unchecked. Removing one checkbox as well as putting them outside of form makes everything work.</p>
  
  <p>Here's my code:</p>
  
  <p>app.component.ts</p>
  
  <pre><code>@Component({
    selector: 'checkbox-configurable-example',
    templateUrl: 'checkbox-configurable-example.html',
    styleUrls: ['checkbox-configurable-example.css']
  })
  export class CheckboxConfigurableExample implements OnInit {
    settingsAccount = {
          activated: true,
          email: 'test@test.com',
          firstName: 'test',
          langKey: 'en',
          lastName: 'test',
          login: 'test',
          imageUrl: null,
          userId: 1
      };
    settingsWorker: any;
    ngOnInit() {
      this.settingsWorker = {
        nurse: true,
        student: false,
        workload: 0.5
      };
    }
  
    save(): void {
      const temp = 2;
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;mat-card&gt;
    &lt;mat-card-content&gt;
      &lt;form name="form" role="form" (ngSubmit)="save()" *ngIf="settingsAccount &amp;&amp; settingsWorker" novalidate&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="checkbox" name="Student" [(ngModel)]="settingsWorker.student"&gt;&lt;label for="Student"&gt;Student&lt;/label&gt;
          &lt;input type="checkbox" name="Nurse" [(ngModel)]="settingsWorker.nurse"&gt;&lt;label for="Nurse"&gt;Nurse&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;mat-checkbox [(ngModel)]="settingsWorker.student"&gt;Student&lt;/mat-checkbox&gt;
            &lt;mat-checkbox [(ngModel)]="settingsWorker.nurse"&gt;Nurse&lt;/mat-checkbox&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;input matInput type="number" [(ngModel)]="settingsWorker.workload" min="0.25" max="1.0"
                    class="form-control" id="workload" #workloadInput="ngModel"
                    step="0.25" name="Workload" placeholder="Workload" required&gt;
            &lt;div *ngIf="workloadInput.dirty &amp;&amp;
            (workloadInput.invalid || workloadInput.value &gt; 1 || workloadInput.value &lt; 0.25)"&gt;
                &lt;mat-error class="error-text"&gt;
                    Please enter integers in range 0.25-1
                &lt;/mat-error&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="submit" [disabled]="settingsForm.form.invalid" class="btn           btn-primary"&gt;Save&lt;/button&gt;
      &lt;/form&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>Interactive code is available <a href="https://stackblitz.com/edit/angular-rawzb6" rel="nofollow noreferrer">stackblitz</a></p>
  
  <p>Thank you in advance!</p>