[英]Form Data on Button Click
So I have a simple login component created with angular like so. 因此,我有一个用角度创建的简单登录组件,如下所示。
<div class="form">
<form (submit) = "loginUser($event)">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button type = "submit">login</button>
</form>
</div>
On click of this button I want to be able to print the data to the console which is why I added this functionality. 单击此按钮后,我希望能够将数据打印到控制台,这就是我添加此功能的原因。
<form (submit) = "loginUser($event)">
This is what my .ts file looks like for that same component. 这是同一组件的.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);
}
}
When I look at the console I don't see the user name and password that was entered. 当我查看控制台时,看不到输入的用户名和密码。 Am I doing something wrong? 难道我做错了什么?
<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>
Component 零件
username: string;
password: string;
loginUser(){
console.log(this.username,this.password);
}
将e.preventDefault()
添加到函数后,它似乎可以正常工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.