Angular form submit not woking
Angular form submit not woking
提问于 2018-09-12 06:45:11
请帮助我的角度形式(提交)不工作。我正在制作一个登录应用程序，我也是angular的初学者。请帮我找出问题所在。
login.component.html
<form (submit)="loginUser($event)">
<input type="text" placeholder="Enter Username">
<input type="password" placeholder="Enter Password">
<input type="submit" value="Submit">
</form>login.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
loginUser(event) {
event.preventDefault()
Console.log(event)
}
}回答 2
Stack Overflow用户
发布于 2018-09-12 07:34:04
我建议您对像ReactiveForms这样的表单使用angular组件，例如：
import { FormGroup, FormControl, Validators } from '@angular/forms';
public loginForm: FormGroup;
constructor() {
this.loginForm = new FormGroup({
'username': new FormControl('', [
Validators.required
]),
'password': new FormControl('', [
Validators.required
])
});
}
public sendLogin(): void {
console.log(loginForm.value);
}
<form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && sendLogin()">
<input formControlName="username" type="text" placeholder="Enter Username">
<input formControlName="password" type="password" placeholder="Enter Password">
<input type="submit" value="Submit">
</form>
只需记住在您的app.module.ts中导入import { FormsModule, ReactiveFormsModule } from '@angular/forms';！
Stack Overflow用户
发布于 2018-09-12 07:02:24
你能试试这个吗？请使用ngSubmit代替(submit)。
<form (ngSubmit)="loginUser($event)">您可能希望在此处添加分号以美化您的代码
event.preventDefault();
Console.log(event);这里有一些参考：https://angular.io/guide/forms
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52285112
复制相关文章
相似问题