title: Angular 8 :ERROR TypeError: Cannot read property 'invalid' of undefined
body: <p>Can someone explain what this actually means? I am new to Angular and currently using Angular 8 and this appears on my console. </p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'invalid' of undefined</p>
  </blockquote>
  
  <pre><code>at Object.eval [as updateDirectives] (RegisterComponent.html:10)
  at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
  at checkAndUpdateView (core.js:44271)
  at callViewAction (core.js:44637)
  at execComponentViewsAction (core.js:44565)
  at checkAndUpdateView (core.js:44278)
  at callViewAction (core.js:44637)
  at execEmbeddedViewsAction (core.js:44594)
  at checkAndUpdateView (core.js:44272)
  at callViewAction (core.js:44637)
  </code></pre>
  
  <p>Here's my sourcode which implies the page that have the errors </p>
  
  <p><strong>register.component.ts</strong></p>
  
  <pre><code>   import { authTkn } from './../shared/model/loginDetails';
     import { MahasiswaApiService } from './../shared/services/mahasiswa-api.service';
     import { Component, OnInit } from '@angular/core';
     import { Router, RouterModule } from '@angular/router';
     import { FormBuilder, FormGroup, Validators } from '@angular/forms';
     import { first } from 'rxjs/operators';
     import * as CryptoJS from 'crypto-js';
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.scss']
  })
  
  export class RegisterComponent implements OnInit {
  
    public authTkn: authTkn = null;
  
    registerForm = this.fb.group({
      user_name: ['', Validators.required],
      fullname: ['', Validators.required],
      telepon: ['', Validators.required],
      email: ['', Validators.required],
      alamat: ['', Validators.required],
      birthdate: ['', Validators.required],
      foto_profil: ['', Validators.required],
      password: ['', Validators.required],
    });
  
  
  constructor(private mahasiswaApi: MahasiswaApiService, private route: Router, private fb: FormBuilder) { }
  
  ngOnInit() {
    }
  
  
  onSubmit() {
      this.registerForm.controls.password.patchValue(
        CryptoJS.SHA512(this.registerForm.value.password).toString()
      );
      console.log(this.registerForm.value);
      this.mahasiswaApi.postUserRegister(this.registerForm.value).subscribe(
        res =&gt; {
          console.log(res);
          this.authTkn = res;
          console.log(this.authTkn);
          localStorage.setItem('token', this.authTkn.token);
          this.mahasiswaApi.getCurrentToken();
          this.route.navigate(['/home']);
          alert(this.authTkn.info);
        },
        error =&gt; {
          console.log(error);
          alert(error.error.message);
        }
      );
    }
  }
  
  </code></pre>
  
  <p><strong>register.component.html</strong></p>
  
  <pre><code>&lt;div class="login-form"&gt;
    &lt;form [formGroup]="registerForm" (ngSubmit)="onSubmit()"&gt;
        &lt;h2 class="text-center"&gt; Register &lt;/h2&gt;
  
        &lt;!-- Register Username --&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="user_name"&gt; Username &lt;/label&gt;
            &lt;input type="text" class="form-control" name="Username" formControlName="user_name" placeholder="text"&gt;
            &lt;div class="alert alert-danger" *ngIf="user_name.invalid &amp;&amp; user_name.dirty" @myInsertRemoveTrigger&gt;Username Must Be filled&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!-- Register Nama Lengkap --&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="nama lengkap"&gt; Nama Lengkap &lt;/label&gt;
          &lt;input type="text" class="form-control" name="Nama Lengkap" formControlName="fullname" placeholder="text"&gt;
          &lt;div class="alert alert-danger" *ngIf="fullname.invalid &amp;&amp; fullname.dirty" @myInsertRemoveTrigger&gt; Please fill your complete name here&lt;/div&gt;
      &lt;/div&gt;
  
        &lt;!-- Register Nomor Telepon --&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="nomor_telepon"&gt; Nomor Telepon &lt;/label&gt;
          &lt;input type="text" class="form-control" name="Nomor Telepon" formControlName="telepon" placeholder="text"&gt;
        &lt;/div&gt;
  
      &lt;!-- Register Email --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="email"&gt; Email &lt;/label&gt;
        &lt;input type="email" class="form-control" name="Email" formControlName="email" placeholder="email"&gt;
      &lt;/div&gt;
  
      &lt;!-- Register Tanggal Lahir --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="Tanggal_lahir"&gt; Tanggal Lahir &lt;/label&gt;
        &lt;input type="date" class="form-control" name="Tanggal Lahir" formControlName="birthdate" placeholder="date"&gt;
      &lt;/div&gt;
  
      &lt;!-- Register Foto --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="Foto_Profil"&gt; Foto Profil &lt;/label&gt;
        &lt;input type="file" class="form-control" name="Foto Profil" formControlName="foto_profil" placeholder="file"&gt;
      &lt;/div&gt;
  
      &lt;!-- Register Password --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="Password"&gt; Password &lt;/label&gt;
        &lt;input type="password" class="form-control" name="Password" formControlName="password" placeholder="password"&gt;
        &lt;div class="alert alert-danger" *ngIf="password.invalid &amp;&amp; password.dirty" @myInsertRemoveTrigger&gt;Password Must Be filled&lt;/div&gt;
    &lt;/div&gt;
  
  
        &lt;!-- Button shit --&gt;
        &lt;div class="form-group"&gt;
            &lt;button type="submit" class="btn btn-primary btn-block" [disabled]="!registerForm.valid"&gt; Register &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class="clearfix"&gt;
            &lt;label class="pull-left checkbox-inline"&gt;&lt;input type="checkbox" formControlName="remember_me"&gt; Remember me&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Maybe I had some variable definition problem, but I did actually define arrays of used variables for my form at the first part of my ts. Maybe I did lost something, what is that?</p>