сообщение: «createUserWithEmailAndPassword не удалось: первый аргумент« email »должен быть допустимой строкой».

Question

Я создал регистрационную форму с аутентификацией в firebase. У меня есть код ниже, в котором я установил FireBase в моем визуальном редакторе кода тогда всякий раз, когда я отправляю форму, я получаю сообщение об ошибке

сообщение: ошибка createUserWithEmailAndPassword: первый аргумент «email» должен быть допустимой строкой.

Я проверил код с помощью отладчика, он покажет, что электронная почта не определена, но я получу значение пароля.

Таким образом, всякий раз, когда эти два значения, которые я передаю функции аутентификации, выдают сообщение об ошибке. угловая версия: 6.0 и версия Firebase: 5.9.0

signup.component.html

<div class="row">
  <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-1">
    <form (ngSubmit)="onSignup(f)" #f="ngForm">
      <div class="form-group">
        <label for="email">Mail</label>
        <input type="email"
          name="email" id="email"
          ngModel
          class="form-control"
         />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input  
          class="form-control" 
          type="password" 
          id="password" 
          name="password" 
          ngModel
        />
      </div>
      <button class="btn btn-primary" type="submit">SignUp</button>
    </form>
  </div>
</div>

signup.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit {
  constructor(private authService:AuthService){}
  ngOnInit(){}

 onSignup(form:NgForm)
 {
  const email = form.value.name;
   const password = form.value.password;
   this.authService.signupUser(email,password);
 }
}

И я создал authservice

import  * as firebase  from 'firebase/app';

export class AuthService
{
    signupUser(email: string, password: string) {
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .catch(
            error => console.log(error)
          )
      }

}

Answer 1

Я бы использовал привязку к ngModel для значений password и email для формы, управляемой шаблоном, например: stackblitz :

signup.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit {
  emailVal: string;
  passwordVal: string;

  constructor(private authService:AuthService){}

  onSignup() {
    this.authService.signupUser(this.emailVal, this.passwordVal);
  }

  ngOnInit() {}
  ...

signup.component.html

<div class="row">
  <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-1">
  <form (ngSubmit)="onSignup()" #f="ngForm">
    <div class="form-group">
      <label for="email">Mail</label>
      <input type="email"
        name="email" id="email"
        [ngModel]="emailVal"
        class="form-control"
      />
    </div>
    <div class="form-group">
      <label for="password">Password</label>
        <input  
          class="form-control" 
          type="password" 
          id="password" 
          name="password" 
          [ngModel]="passwordVal"
       />
      </div>
      <button class="btn btn-primary" type="submit">SignUp</button>
    </form>
  </div>
</div>