typescript - Angular 5 提交未触发
我目前正在学习 Angular,并且我正在跟随一些教程,我已经创建了一个简单的注册组件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
form: FormGroup;
createForm() {
this.form = this.formBuilder.group({
email: '',
username: '',
password: '',
confirm: ''
})
}
onRegisterSubmit() {
console.log('this.form');
}
constructor(private formBuilder: FormBuilder) {
this.createForm();
}
ngOnInit() {
}
}
并在 HTML 中定义以下表单:
<h1 class="page-header">Registration Page</h1>
<form [formGroup]="form" ng-submit="onRegisterSubmit()">
<div class="form-group">
<label for="username">Username</label>
<div>
<input type="text" name="username" class="form-control" autocomplete="off" placeholder="*Username" formControlName="username" />
</div>
</div>
<div class="form-group">
<label for="email">E-mail</label>
<div>
<input type="text" name="email" class="form-control" autocomplete="off" placeholder="*Email" formControlName="email" />
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div>
<input type="text" name="password" class="form-control" autocomplete="off" placeholder="*Password" formControlName="password" />
</div>
</div>
<div class="form-group">
<label for="confirm">Confirm Password</label>
<div>
<input type="text" name="confirm" class="form-control" autocomplete="off" placeholder="*Confirm Password" formControlName="confirm" />
</div>
</div>
<input type="submit" class="btn btn-primary" value="submit" />
</form>
我似乎无法让 onRegisterSubmit 函数触发。
我尝试过对表单使用不同的事件((submit)、(ng-submit)、ng-submit)并调试表单,但当我点击提交时看不到任何事件触发。
有人能看出我做错了什么吗?
答案#1
尝试 (ngSubmit)="onRegisterSubmit()"
答案#2
要达到预期的结果,请使用 ngSubmit
根据 Angular 文档 - ngSubmit
“您可以监听指令的 ngSubmit 事件,以便在用户触发表单提交时收到通知。ngSubmit 事件将随原始表单提交事件一起触发。”
查看此链接以获取更多详情 - https://angular.io/api/forms/NgForm