4

Google、Facebook、または Twitter でログインするオプションを使用して を作成しましたlogin-serviceが、うまく機能しています。

電子メールとパスワードでログインするオプションを作成しようとしています (このオプションは firebase コンソールで有効になっています)、それを機能させることができません。

私のログインサービスコードは次のとおりです。

import {Injectable, OnInit} from '@angular/core';
import {AngularFire, AuthProviders, AuthMethods} from "angularfire2/angularfire2";


@Injectable()
export class LoginService implements OnInit {
public isLoged: boolean;

ngOnInit() {

}

constructor(private af: AngularFire) {
  this.af.auth.subscribe(user => {
    if (user) {
      this.isLoged = true;
      console.info("Se ha logueado correctamente")
    } else {
      this.isLoged = false;
      console.info("Se ha deslogueado correctamente");
    }
  });
}

login() {
  this.af.auth.login();
}

loginGoogle() {
  //this is the default login , that it's setup in the main.js
  this.login();
}

loginFacebook() {
  this.af.auth.login({
    provider: AuthProviders.Facebook,
    method: AuthMethods.Redirect
  });
}

loginTwitter() {
  this.af.auth.login({
    provider: AuthProviders.Twitter,
    method: AuthMethods.Redirect
  });
}

createUser(email: string, password: string) {
  this.af.auth.createUser({ email: email, password: password });
}

loginWithPassword() {
  this.af.auth.login({

    provider: AuthProviders.Password,
    method: AuthMethods.Password
  })
}

logOut() {
  this.af.auth.logout();
}

}

そして、main.ts は次のとおりです。

import { APP_BASE_HREF } from '@angular/common';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';

import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component';
import {
  FIREBASE_PROVIDERS, defaultFirebase, firebaseAuthConfig, AuthProviders,
  AuthMethods
} from "angularfire2/angularfire2";

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

/**
 * Bootstraps the application and makes the ROUTER_PROVIDERS and the APP_BASE_HREF available to it.
 * @see https://angular.io/docs/ts/latest/api/platform-browser-dynamic/index/bootstrap-function.html
 */
bootstrap(AppComponent, [
  disableDeprecatedForms(),
  provideForms(),
  APP_ROUTER_PROVIDERS,
  {
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  },
  FIREBASE_PROVIDERS,
  defaultFirebase({ //this data is replaced
    apiKey: 'apiKey',
    authDomain: 'authDomain',
    databaseURL: 'databaseURL',
    storageBucket: 'storageBucket',
  }),
  firebaseAuthConfig({
    provider: AuthProviders.Google,
    method: AuthMethods.Popup,
  })
]);

更新：

@JS_astronauts が言ったように、問題はデータがログイン サービスに渡される方法に関連しています。

login.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, Validators, ControlGroup ,NgFormModel} from '@angular/common'
import {AngularFire, AuthProviders, AuthMethods} from 'angularfire2';
import {LoginService} from '../shared/login-service/login.service'
import {Router} from "@angular/router";

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: 'login.component.html',
    styleUrls : ['login.component.css'],
    directives : [NgFormModel]
})
export class LoginComponent implements OnInit {

    loginForm : ControlGroup;

    constructor(private router: Router,
                private fb : FormBuilder,
                private loginService : LoginService) {

      this.loginForm = fb.group({
        name : ["" , Validators.required],
        correo : ["" , Validators.required],
        contrasena :["",Validators.required]
      })
    }

    ngOnInit() {
    }

    loginWithPassword(){
      this.loginService.createUser( 
        this.loginForm.controls['correo'].value.toString() ,
        this.loginForm.controls['contrasena'].value.toString()
      );

  if(this.loginService.isLoged ){
    this.router.navigate(['./ejemplo']);
  }
}
}

そして、私が持っているhtmlで：

 <form [ngFormModel]="loginForm" (submit)="loginWithPassword()">
    <div id="DIV_13">
      <div id="DIV_14">
        <span id="SPAN_15"> <i id="I_16">face</i></span>
        <div id="DIV_17">
          <input ngControl="name" type="text" placeholder="First Name..." id="INPUT_18" /><span id="SPAN_19"></span>
        </div>

      </div>
      <div id="DIV_20">
        <span id="SPAN_21"> <i id="I_22">email</i></span>
        <div id="DIV_23">
          <input ngControl="correo"  type="text" placeholder="Email..." id="INPUT_24" /><span id="SPAN_25"></span>
        </div>
      </div>
      <div id="DIV_26">
        <span id="SPAN_27"> <i id="I_28">lock_outline</i></span>
        <div id="DIV_29">
          <input  ngControl="contrasena" type="password" placeholder="Password..." id="INPUT_30" /><span id="SPAN_31"></span>
        </div>
      </div> 
    </div>

    <div id="DIV_32">
      <button type="submit" id="A_33">Get Started</button>
    </div>
    </form>

しかし、 this.loginForm.controls['correo'].value.toString() で取得した値は null に等しいので、値を取得するにはどうすればよいですか?

どこに問題があるのですか？よろしくロベルト。

4

2 に答える 2

2

問題が見つかりました。問題は、html の ngFormModel のディレクティブを " [ ] " に入れ、logig.component.ts のコンポーネントにディレクティブ "FORM_DIRECTIVES" を追加する必要があることでした。

PS : ngFormModel を使用すると、コンソールに情報メッセージが表示され、このディレクティブが次の RC でオプトインされ、最終的に新しいフォーム モジュールを優先して削除されることを警告するため、この実装は動作しません未来

于 2016-07-18T00:04:02.037 に答える