title: Why I cannot get form control from NgForm
body: <p>I have simple form </p>
  
  <pre><code>&lt;form novalidate #f="ngForm"&gt;
    &lt;mat-form-field class="example-full-width"&gt;
      &lt;input matInput placeholder="Favorite food" name="myname" required [(ngModel)]="comment"&gt;
      &lt;mat-error&gt;Is required lol&lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field class="example-full-width"&gt;
      &lt;input matInput placeholder="Favorite food" required name="some"&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and component as </p>
  
  <pre><code>export class InputOverviewExample {
    comment = null;
    @ViewChild('f')
    form: NgForm
  
  
    ngOnInit() {
      console.log(this.form.controls);
      console.log(Object.keys(this.form.controls));
  
      console.log(this.form.controls.myname);
      console.log(this.form.controls['myname']);
    }
  }
  </code></pre>
  
  <p>The thing is, console output is:</p>
  
  <pre><code>{}
  ​
      myname: Object { pristine: true, touched: false, status: "INVALID", … }
          Array []
          undefined
  </code></pre>
  
  <p>So why I cannot access form controls by name, and why <code>Object.keys</code> returns empty array while console says there are some keys in <code>form.controls</code> ??
  This is a playground so please ignore duplicated form inputs etc.
  <a href="https://stackblitz.com/edit/angular-urqles" rel="noreferrer">https://stackblitz.com/edit/angular-urqles</a></p>