First argument "email" must be a valid string."

Question

I'm recently working in a project using Angular2 with material component and developing a sigun & 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."

<form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm">
      <label class="registr">Registration Form</label>
        <table class="example-full-width" cellspacing="0"><tr>
          <td><mat-form-field class="example-full-width">
            <input matInput id="fname" name="fname" placeholder="First name">
          </mat-form-field></td>

          <td><mat-form-field class="example-full-width">
            <input matInput id="lname" name="lname" placeholder="Last Name">
          </mat-form-field></td>
          </tr></table>

          <mat-form-field>
              <input type="email" matInput placeholder="Enter your email" id="email" name="email" [formControl]="email" required>
              <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
          </mat-form-field>

        <mat-form-field>
            <input type="password" matInput placeholder="Enter your password" id="password" name="password" [type]="hide ? 'password' : 'text'">
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
          </mat-form-field>
        <button type="button" class="btn btn-info d-none d-lg-block m-l-15" type="submit">Sign Up</button>
      </form>

signupcomponent.ts

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);
      }

   }

auth.service.ts

    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 => console.log(error)
      )
  }

  signinUser(email: string, password: string) {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(
        response => {
          this.router.navigate(['/']);
          firebase.auth().currentUser.getToken()
            .then(
              (token: string) => this.token = token
            )
        }
      )
      .catch(
        error => console.log(error)
      );
  }

  isAuthenticated() {
    return this.token != null;
  }
}

Answer 1

1 - You didn't declare your form into your component.

2 - You're duplicating the form logic by using a form in your HTML and a form control in your component.

3 - If you want to keep your code, yo ushould consider renaming your form control, to let's say emailFormControl, to avoid any confusion with your form.

4 - Once you have renamed your form control, you should change your HTMl to cope with your new model.

5 - It would be nice to post the actual error trace, as well as your HTTP call (in your dev tools), so that we can actually see the issue, and not guess.