title: Angular 7 Reactive Forms Cannot read property 'controls' of undefined
body: <p>I am using <code>ReactiveForms</code> in Angular v7. </p>
  
  <p><strong>Template</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="login__container"&gt;
      &lt;div class="login__form"&gt;
          &lt;form novalidate [formGroup]="loginForm" (ngSubmit)="onSubmit()"&gt;
              &lt;div class="field"&gt;
                  &lt;p class="control"&gt;
                      &lt;input class="input" type="text" placeholder="Username" formControlName="username" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.username.errors }"&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                  &lt;p class="control"&gt;
                      &lt;input class="input" type="password" placeholder="Password" formControlName="password" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.password.errors }"&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                  &lt;p class="control"&gt;
                      &lt;button class="button is-success" [disabled]="!loginForm.valid"&gt;
                          Login
                      &lt;/button&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core'
  import { FormBuilder, FormGroup, Validators } from '@angular/forms'
  
  @Component({
      selector: 'app-login-component',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit {
      loginForm: FormGroup
      submitted = false
  
      constructor(private fB: FormBuilder) {}
  
      ngOnInit() {
          this.loginForm = this.fB.group({
              username: ['', Validators.required],
              password: ['', Validators.required]
          })
      }
  
      // convenience getter for easy access to form fields
      get f() {
          return this.loginForm.controls
      }
  
      onSubmit() {
          this.submitted = true
  
          // stop here if form is invalid
          if (this.loginForm.invalid) {
              return
          }
  
          console.log(this.loginForm.value)
      }
  }
  </code></pre>
  
  <p>When I go to this route, I have a console error</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'controls' of undefined
      at Object.get [as f] (http://localhost:4200/main.js:257:35)
      at http://localhost:4200/vendor.js:92667:9
      at Array.forEach (&lt;anonymous&gt;)
      at deepFreeze (http://localhost:4200/vendor.js:92664:33)
      at http://localhost:4200/vendor.js:92670:7
      at Array.forEach (&lt;anonymous&gt;)
      at deepFreeze (http://localhost:4200/vendor.js:92664:33)
      at http://localhost:4200/vendor.js:92670:7
      at Array.forEach (&lt;anonymous&gt;)
      at deepFreeze (http://localhost:4200/vendor.js:92664:33)
  </code></pre>
  
  <p>I cannot work out why this happening, the validation around the submit button appears to be working, so I can only assume the fields are being referenced correctly. I suspect the issue is coming from the convenience getter set within the component, however I cannot see what is wrong with this as autocomplete is providing me with the values I expect.</p>