title: Angular Material Slide Toggle not changing bound variable
body: <p>I have 2 strange problems. I have a large form with lots of input fields. That works fine. I want to add a slide toggle at the bottom which changes a variable that will affect styles on the whole form.</p>
  
  <p>My first problem is that the variable will not display until the slide toggle is clicked.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" &gt;&lt;/mat-slide-toggle&gt;
  
  &lt;div&gt;
    {{ifPrint}}
  &lt;/div&gt;
  </code></pre>
  
  <p>COMPONENT</p>
  
  <pre><code>export class PrintReviewDetailsComponent implements OnInit {
  ifPrint = true;
  }
  </code></pre>
  
  <p>the ifPrint variable is blank on page load</p>
  
  <p>The second problem is</p>
  
  <p>when the slide toggle is clicked the div containing the variable shows as true but when I click the toggle to the off position the ifPrint variable stays as true and does not change.</p>
  
  <p>I have created a <a href="https://stackblitz.com/edit/angular-mvpfu5-dsfytx" rel="nofollow noreferrer">blitz</a> and it is working fine there with the same code so I am unsure as why I am having these issues on my page. </p>
  
  <p>The console says: </p>
  
  <pre><code>Error: No value accessor for form control with name: 'ifPrint'
  </code></pre>
  
  <p>EDIT: I updated the stackblitz to include the html of the form and now it is not working.</p>