сообщение: "Ошибка создания пользовательского пароля: первый аргумент "email" должен быть допустимой строкой".

#angular #validation #firebase-authentication

#angular #проверка #firebase-аутентификация

Вопрос:

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

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

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

Поэтому всякий раз, когда эти два значения я передаю функции аутентификации, она выдает сообщение об ошибке. версия angular: 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)
          )
      }

}

1. Добро пожаловать в StakOverflow. У меня 0 опыта работы с Angular, но мне кажется, что это email недопустимый тип ввода. Или вы не закрыли тег. Или оба.

2. Вы передаете form.value.name; как электронное письмо. Может быть, так и должно быть form.value.email; ?

3. ДА.. Спасибо.. Я почти забыл это.

Ответ №1:

Я бы использовал привязку к ngModel для значений password и email для формы, управляемой шаблоном, такой как so 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>