title: Angular 6: ERROR TypeError: Cannot read property 'toLowerCase' of undefined
body: <p>I am creating CRUD app in angular six about users, when I am trying to add new user I am getting the following error: </p>
  
  <p>Here is the error I am getting : </p>
  
  <pre><code>core.js:12301 ERROR TypeError: Cannot read property 'toLowerCase' of undefined
      at HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http.js:1718)
      at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1134)
      at HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http.js:1769)
      at MergeMapSubscriber.project (http.js:974)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
      at Observable._subscribe (scalar.js:5)
      at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
      at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
  </code></pre>
  
  <p>Here is add user component html : </p>
  
  <pre><code>&lt;div class="container add-user"&gt;
    &lt;div class="col-md-6"&gt;
      &lt;h2 class="text-center"&gt;Add User&lt;/h2&gt;
      &lt;form [formGroup]="addForm" (ngSubmit)="onSubmit()"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="email"&gt;Email address:&lt;/label&gt;
          &lt;input type="email" formControlName="email" placeholder="Email" name="email" class="form-control" id="email"&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="firstName"&gt;First Name:&lt;/label&gt;
          &lt;input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName"&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="lastName"&gt;Last Name:&lt;/label&gt;
          &lt;input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName"&gt;
        &lt;/div&gt;
  
        &lt;button class="btn btn-success"&gt;Update&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {FormBuilder, FormGroup, Validators} from '@angular/forms';
  import {UserService} from '../service/user.service';
  import {first} from 'rxjs/operators';
  import {Router} from '@angular/router';
  
  @Component({
    selector: 'app-add-user',
    templateUrl: './add-user.component.html',
    styleUrls: ['./add-user.component.scss']
  })
  export class AddUserComponent implements OnInit {
  
    constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) { }
  
    addForm: FormGroup;
  
    ngOnInit() {
  
      this.addForm = this.formBuilder.group({
        id: [],
        email: ['', Validators.required],
        firstName: ['', Validators.required],
        lastName: ['', Validators.required]
      });
  
    }
  
    onSubmit() {
      this.userService.createUser(this.addForm.value)
        .subscribe( data =&gt; {
          this.router.navigate(['list-user']);
        });
    }
  
  }
  </code></pre>
  
  <p>here is user service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { User } from '../model/user.model';
  
  @Injectable({
    providedIn: 'root'
  })
  export class UserService {
  
    constructor(private http: HttpClient) { }
    baseUrl: 'http://locahost:4200/users';
  
    getUsers() {
      return this.http.get&lt;User[]&gt;(this.baseUrl);
    }
    getUserById(id: number) {
      return this.http.get&lt;User&gt;(this.baseUrl + '/' + id);
    }
    createUser(user: User) {
      return this.http.post(this.baseUrl, user);
    }
    updateUser(user: User) {
      return this.http.put(this.baseUrl + '/' + user.id, user);
    }
    deleteUser(id: number) {
      return this.http.delete(this.baseUrl + '/' + id);
    }
  }
  </code></pre>
  
  <p>I tried different ways but am not able to solve the issue :)</p>
  
  <p>what am I doing wrong in my app? any help will be apreciated, thanks</p>