Angular 5提交未触发答案

【问题标题】：Angular 5 submit not firingAngular 5提交未触发
【发布时间】：2018-04-06 15:21:16
【问题描述】：

我目前正在学习 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）并调试表单，但单击提交时看不到任何事件触发。

谁能看到我做错了什么？

【问题讨论】：

标签： angular typescript mean-stack

【解决方案1】：

试试(ngSubmit)="onRegisterSubmit()"

【讨论】：

【解决方案2】：

要达到预期结果，请使用 ngSubmit

根据角度文档 - ngSubmit
"当用户触发表单提交时，您可以监听指令的 ngSubmit 事件。ngSubmit 事件将与原始表单提交事件一起发出。"

查看此链接了解更多详情 - https://angular.io/api/forms/NgForm

【讨论】：