Question

所以我有一个像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);
  }

}

当我查看控制台时，我看不到输入的用户名和密码。我做错了吗？

Answer 1

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

Answer 2

将e.preventDefault()添加到该函数后，它似乎按预期工作

按钮上的表单数据单击

2 个答案: