AngularFire Login Auth Error

Question

私たちのウェブサイトのユーザーのログインを設定しようとしています。ユーザーはサインアップすることができ、dbは電子メールとパスワードを収集しますが、ログインメールやパスワードは確認できません。 ..

以下の詳細はここでログインコンポーネントです：

{code: "auth/argument-error", message: "signInWithEmailAndPassword failed: First argument "email" must be a valid string.", ngDebugContext: DebugContext_, ngErrorLogger: ƒ} 

私に教えてください：

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

import { Store } from '@ngrx/store'; 

import * as fromApp from '../../../reducers'; 

import * as app from '../../../core/store/app.actions'; 

import { AngularFireDatabase } from 'angularfire2/database'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import * as firebase from 'firebase/app'; 

@Component({ 
    selector: 'app-client-login', 
    templateUrl: './client-login.component.html', 
    styleUrls: ['./client-login.component.css'] 
}) 
export class ClientLoginComponent { 

    client: FormGroup; 

    constructor(
     private _fb: FormBuilder, 
     private _afAuth: AngularFireAuth, 
     private _afDb: AngularFireDatabase, 
     private _appStore: Store<fromApp.State> 

    ) { 
     this.buildForm(); 

     // this._appStore.dispatch(new app.DisplayLoading()); 
    } 

    ngOnInit() {} 

    buildForm(): void { 
     this.client = this._fb.group({ 
     email: ['', [Validators.required, Validators.email]], 
     password: ['',Validators.required], 
     }); 
    } 

    login(email: string, password: string) { 
     return this._afAuth.auth.signInWithEmailAndPassword(email, 
     password) 
    } 

} 

は、ここでのhtml

<div class="container-fluid"> 
<div class="row justify-content-center"> 
    <div class="col-sm-12 col-md-6"> 

     <form [formGroup]="client"> 

     <h2 class="form-signin-heading">Please login</h2> 
     <div class="form-group"> 

     <input type="text" formControlName="email" id="email" 
class="form-control" name="username" placeholder="Email Address" 
required="" autofocus="" /> 

     <input type="password" formControlName="password" id="password" 
class="form-control" name="password" placeholder="Password" 
required=""/>  

     <label class="checkbox"> 
     <input type="checkbox" value="remember-me" id="rememberMe" 
name="rememberMe"> Remember me 
     </label> 
    </div> 

     <button (click)="login()" class="btn btn-primary" 
type="submit">Login</button> 

    </form> 

    </div> 
    </div> 
</div> 

はここでエラーメッセージが表示されていますより多くの情報が必要な場合。 GitHubディレクトリにプロジェクトを表示したい場合は、このリンクに従ってください。

https://github.com/htobolka/nile-delivery

我々は常に助けを探しています！

Answer 1

イベントハンドラ（つまりlogin()）にパラメータが指定されていませんが、loginにはパラメータとして渡される電子メールとパスワードが必要です。この場合、電子メールとパスワードはundefined〜signInWithEmailAndPassword()として渡され、実行時にエラーが発生します。

<button (click)="login(client.get('email').value, client.get('password').value)" class="btn btn-primary" type="submit">Login</button> 

それとも、命令的フォームの値を読み取るためにloginを更新できます：

は、問題を解決するには、メールアドレスとパスワードの値を渡すためにあなたのテンプレートを更新できいずれか

login() { 
    const email = this.client.get('email').value; 
    const password = this.client.get('password').value; 
    return this._afAuth.auth.signInWithEmailAndPassword(email, password); 
}