title: First argument "email" must be a valid string."
body: <p>I'm recently working in a project using Angular2 with material component and developing a sigun &amp; login form attached to Firebase. The things is, whenever the signin button is clicked it should give an error "ERROR M {code: "auth/argument-error", message: "createUserWithEmailAndPassword failed: First argument "email" must be a valid string."</p>
  
  <pre><code>&lt;form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm"&gt;
        &lt;label class="registr"&gt;Registration Form&lt;/label&gt;
          &lt;table class="example-full-width" cellspacing="0"&gt;&lt;tr&gt;
            &lt;td&gt;&lt;mat-form-field class="example-full-width"&gt;
              &lt;input matInput id="fname" name="fname" placeholder="First name"&gt;
            &lt;/mat-form-field&gt;&lt;/td&gt;
  
            &lt;td&gt;&lt;mat-form-field class="example-full-width"&gt;
              &lt;input matInput id="lname" name="lname" placeholder="Last Name"&gt;
            &lt;/mat-form-field&gt;&lt;/td&gt;
            &lt;/tr&gt;&lt;/table&gt;
  
            &lt;mat-form-field&gt;
                &lt;input type="email" matInput placeholder="Enter your email" id="email" name="email" [formControl]="email" required&gt;
                &lt;mat-error *ngIf="email.invalid"&gt;{{getErrorMessage()}}&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
  
          &lt;mat-form-field&gt;
              &lt;input type="password" matInput placeholder="Enter your password" id="password" name="password" [type]="hide ? 'password' : 'text'"&gt;
              &lt;mat-icon matSuffix (click)="hide = !hide"&gt;{{hide ? 'visibility' : 'visibility_off'}}&lt;/mat-icon&gt;
            &lt;/mat-form-field&gt;
          &lt;button type="button" class="btn btn-info d-none d-lg-block m-l-15" type="submit"&gt;Sign Up&lt;/button&gt;
        &lt;/form&gt;
  </code></pre>
  
  <blockquote>
    <p>signupcomponent.ts</p>
  </blockquote>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import {FormControl, Validators} from '@angular/forms';
  
  import { AuthService } from '../auth.service';
  
  @Component({
    selector: 'app-signup',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.css']
  })
  
  export class SignupComponent implements OnInit {
    hide = true;
    //name:string = "irf";
    constructor(private authService: AuthService) { }
  
    ngOnInit() {
    }
  
    email = new FormControl('', [Validators.required, Validators.email]);
  
    getErrorMessage() {
      return this.email.hasError('required') ? 'You must enter a value' :
          this.email.hasError('email') ? 'Not a valid email' :
              '';
    }
  
    onSignup(form: NgForm) {
      //console.log(this.form)
      //return
      const email = form.value.email;
      const password = form.value.password;
      this.authService.signupUser(email, password);
        }
  
     }
  </code></pre>
  
  <p>auth.service.ts</p>
  
  <pre><code>    import { Router } from '@angular/router';
  import * as firebase from 'firebase';
  import { Injectable } from '@angular/core';
  
  import { SignupComponent } from './signup/signup.component';
  
  @Injectable()
  export class AuthService {
    token: string;
  
    constructor(private router: Router) {}
  
    signupUser(email: string, password: string) {
      firebase.auth().createUserWithEmailAndPassword(email, password)
        .catch(
          error =&gt; console.log(error)
        )
    }
  
    signinUser(email: string, password: string) {
      firebase.auth().signInWithEmailAndPassword(email, password)
        .then(
          response =&gt; {
            this.router.navigate(['/']);
            firebase.auth().currentUser.getToken()
              .then(
                (token: string) =&gt; this.token = token
              )
          }
        )
        .catch(
          error =&gt; console.log(error)
        );
    }
  
    isAuthenticated() {
      return this.token != null;
    }
  }
  </code></pre>