点击按钮时的表单数据

3

我有一个使用Angular创建的简单登录组件,如下所示。

<div class="form">
<form (submit) = "loginUser($event)">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button type = "submit">login</button>
</form>
</div>

点击此按钮时,我希望能够将数据打印到控制台,这就是我添加此功能的原因。

<form (submit) = "loginUser($event)">

这是同一个组件的 .ts 文件的外观。
import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

  loginUser(e){
    var username = e.target.elements[0].value;
    var password = e.target.elements[1].value;
    console.log(username,password);
  }

}

当我查看控制台时,我没有看到输入的用户名和密码。我做错了什么吗?


2
如果你觉得自己错过了一些简单的东西,那么请先删除你的问题。否则,如果你认为这是一个好问题,请回答并在一天内接受答案,以造福未来的用户。 - kabanus
删除我的问题会扣分吗? - Ron Baker
我实际上想看看其他的方法来做这件事,这样我就不会删除我的问题。 - Ron Baker
为什么不创建一个模型并使用(ngModel)绑定HTML? - Eldho
  1. 不会,但如果你这样做太频繁,你可能会被禁言。
  2. 那就好 - 在你的答案中添加你添加到函数中的位置(两行代码),并将“hacky”和请求建议移动到注释中,因为它不是答案的一部分 - 我看到它得到了一个负评,所以稍微详细解释一下。我认为问题和答案都还可以。
- kabanus
你的代码没有问题,应该可以正常工作。如果不能正常工作,那么可能是其他方面出了问题。 - dfsq
2个回答

5
<form class="k-form" (ngSubmit)="loginUser()>

  <input type="text" [(ngModel)]="username" name="username"  placeholder="username">

  <input type="password"[(ngModel)]="password" name="password" placeholder="password">
</form>

组件

username: string;
password: string;


loginUser(){
  console.log(this.username,this.password);
}

0
在函数中添加e.preventDefault()后,它似乎按预期工作。

这似乎是一种笨拙的做法。还有其他建议吗? - Ron Baker

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接