мои данные не достигают моей функции в component.ts (угловой)

Question

Я использую Firebase от Google и пытаюсь соединить страницу входа с зарегистрированными учетными записями, но когда я отправляю входные данные с html-страницы в component.ts, он не будет читать данные или доходить доfirebase, но когда я пытаюсь с его инициализировать его в var, он работает

component.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');
      }
    );
  }

другой способ, основанный на вашем вопросе, изменить тип элемента кнопки на кнопку вместо отправки:

<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

Если вы выбираете шаблон формы, вы можете получить значение формы без создания какого-либо свойства на уровне компонента. Я думаю, что это все форма шаблона, иначе мы используем реактивную форму

template

<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;
    ....
  }

демо ?

Answer 3

Ваша проблема в том, что 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');
      }
    );
 }