Question

我正在创建和Angular2登录表单，但我遇到了问题，因为组件没有捕获密码......

这是观点：

<div class="col-md-4">
    <p>
        <label>Correo electrónico:</label>
        <input type="email" class="form-control"   [(ngModel)]="user.email" required />
        <span *ngIf="!email.valid">El email es obligatorio</span>
    </p>

    <p>
        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" required />
        <span *ngIf="!password.valid">La contraseña es obligatoria</span>
    </p>

    <button (click)="onSubmit()" > Entrar </button>

这是组件：

import { Component, OnInit }  from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';


import {User}         from '../model/user';
import {LoginService}  from '../services/login.service';


@Component({
    selector: 'login',
    templateUrl: 'app/views/login.html'
})

// Clase del componente donde irán los datos y funcionalidades
export class LoginComponent implements OnInit {
    public tituloLogin: string = "Identificate";
    public user;

constructor(
        private _loginService: LoginService,
        private _route: ActivatedRoute,
        private _router: Router
    ){} 

    ngOnInit(){

        this.user = {
            "email": "",
            "password": "",
            "gethash": "false"
        };

    }

    onSubmit(){
        console.log(this.user); 
}
    }

系统正确捕获带有模型的电子邮件，但没有密码......

感谢!!!

Answer 1

乍看之下，我唯一能看到的就是尝试改变：

public user;

到

public user: User = {
            "email": "",
            "password": "",
            "gethash": "false"
        };

Answer 2

您的验证遇到了一些问题，这会导致错误，从而影响了该值。我在测试你的代码时注意到了这一点。

由于您在技术上没有表单，因此不能使用!email.valid之类的内容，因为没有这样的内容。如果您只想使用双向绑定而实际上不使用表单，则应该这样做，将您的验证更改为：

<span *ngIf="!user.email">El email es obligatorio</span>
<span *ngIf="!user.password">La contraseña es obligatoria</span>

Demo

但是如果您想使用表单，请进行以下更改：

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<p>
    <label>Correo electrónico:</label>
    <input type="email" name="email" #email="ngModel" [(ngModel)]="user.email" required />
    <span *ngIf="!email?.valid">El email es obligatorio</span>
</p>
<p>
    <label>Contraseña:</label>
    <input type="password" #password="ngModel" name="password" [(ngModel)]="user.password" required />
    <span *ngIf="!password?.valid">La contraseña es obligatoria</span>
</p>
  <button type="submit"> Entrar </button>
</form>

Demo

Answer 3

问题解决了。

我改变如下：

<form  (ngSubmit)="onSubmit()" class="col-md-4">
    <p>
        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />
        <span *ngIf="!username.valid">El nombre de usuario es obligatorio</span>
    </p>

    <p>
        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />
        <span *ngIf="!password.valid">La contraseña es obligatoria</span>
    </p>

    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

不允许以这种方式使用任何ngForm和ngModel：

<form #loginForm="ngForm" (ngSubmit)="onSubmit()" class="col-md-4">

所以现在，用户表单的核心方式是第一个。

谢谢！

Angular2登录表单无法捕获密码

3 个答案:

Demo

Demo