Question

我正在使用Google的Firebase，并尝试将登录页面与注册帐户连接起来，但是当我将html页面的输入发送到component.ts时，它将无法读取数据或无法访问火力基地但是当我尝试将其初始化为var时，它就起作用了

components.ts

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


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

      //email:string = 'email@yahoo.fr'; 
      //password:string = 'password'; // it connect when i initialize the var's

      constructor(private authService: AuthService, private router:Router) { }

      ngOnInit() {
      }

      seConnecter(email,password)
      {
        this.authService.signInUser(email,password).then(
          () => {
            alert('Welcome '+ email);
            this.router.navigate(['']);
          },
          (error) => {
            console.log('Connection Problem '+error);
            alert('Account inaccessible');
          }
        );
      }
    }

component.html

<div class="container">
    <h1>
        log-In
    </h1>
    <form>
      <div class="form-group">
        <label for="name">E-mail :</label>
        <input type="email" class="form-control" required id="email" #email>
      </div>

      <div class="form-group">
        <label for="alterEgo">Password :</label>
        <input type="password" class="form-control" required id="password" #password>
      </div>

      <button type="submit" class="btn btn-success" (click)='seConnecter(email,password)'>Submit</button>

    </form>
</div>

Answer 1

您正在将元素发送到方法（ seConnecter ）。如下修改您的html：

  <button type="submit" class="btn btn-success" (click)='seConnecter(email.value,password.value)'>Submit</button>

编辑：

定义模型：

export interface LoginModel {
  email: string;
  password: string;
}

您的html：

<form (submit)="seConnecter($event)">
  <div class="form-group">
    <label for="name">E-mail :</label>
    <input type="email" class="form-control" required #email="ngModel" [(ngModel)]="this.model.email" />
  </div>
  <div class="form-group">
    <label for="alterEgo">Password :</label>
    <input type="text" class="form-control" required #password="ngModel" [(ngModel)]="this.model.password" />
  </div>
  <div class="form-group">
    <input type="submit" value="submit" />
  </div>
</form>

打字稿：

  seConnecter(event: Event) {
    event.preventDefault();
    this.authService.signInUser(this.model.email, this.model.password).then(
      () => {
        alert('Welcome ' + this.model.email);
        this.router.navigate(['']);
      },
      (error) => {
        console.log('Connection Problem ' + error);
        alert('Account inaccessible');
      }
    );
  }

根据您的问题，另一种方法是将button元素的类型修改为button而不是commit：

<form>
  <div class="form-group">
    <label for="name">E-mail :</label>
    <input type="email" class="form-control" required id="email" #email>
  </div>

  <div class="form-group">
    <label for="alterEgo">Password :</label>
    <input type="password" class="form-control" required id="password" #password>
  </div>
  <button type="button" class="btn btn-success" (click)='seConnecter(email.value,password.value)'>Submit</button>
</form>

打字稿：

  seConnecter(email: string,password: string)
  { 
     ...
  }

Answer 2

您的问题是seConnecter()缺少正确的参数：

这应该有效：

 seConnecter(email, password)
 {
 this.authService.signInUser(email,password).then(
  () => {
    alert('Welcome '+ email);
    this.router.navigate(['']);
  },
    (error) => {
       console.log('Connection Problem '+error);
       alert('Account inaccessible');
      }
    );
 }

Answer 3

如果您选择模板表单，则无需在组件级别创建任何属性即可获取表单值，我认为这是所有模板表单的全部内容，否则我们将使用反应性表单

模板

<div class="container">
    <h1>
        log-In
    </h1>
    <form #loginForm="ngForm" (ngSubmit)="seConnecter(loginForm.value)">
      <div class="form-group">
        <label for="name">E-mail :</label>
        <input type="email" class="form-control" required id="email">
      </div>

      <div class="form-group">
        <label for="alterEgo">Password :</label>
        <input type="password" class="form-control" required id="password" >
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
    </form>
</div>

表单表单控件，您需要放置ngModel指令并设置名称

您可以禁用提交按钮，直到表单成为验证设置的有效依据为止

 <button type="submit" class="btn btn-success" [disabled]="loginForm?.form.invalid" >
     Submit
 </button>

组件

  seConnecter(formValue) {
    const {email , password} = formValue;
    ....
  }

demo ?

我的数据无法到达component.ts上的函数（角度）

3 个答案: