Angular2（ngSubmit）不工作

Posted 2023-02-22

【中文标题】Angular2（ngSubmit）不工作

【英文标题】：Angular2 (ngSubmit) not working

【发布时间】：2017-04-29 14:28:12

【问题描述】：

我刚刚启动 Angular2 并在向我的表单添加 (ngSubmit) 属性时遇到以下错误

Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("


    <form [ERROR ->]#form="ngForm" (ngSubmit)="onSubmit()" novalidate>

以下是我在 package.json 中的一些依赖项。

"dependencies": 
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "core-js": "^2.4.1",
    "ie-shim": "^0.1.0",
    "jquery": "^3.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  

我关注的是 html 表单。

<form #form="ngForm" (ngSubmit)="onSubmit()" novalidate>

    <div class="form-group">
        <label>Title</label>
        <input [(ngModel)]="model.Title" #title="ngModel" name="title" id="title" type="text" class="form-control" value="">
    </div>

    <div class="form-group">
        <label>Description</label>
        <textarea [(ngModel)]="model.Description" #description="ngModel" class="summernote form-control" name="description" id="description"></textarea>
    </div>

</form>

并遵循 category.component 文件

import  Component  from '@angular/core';
import  FormBuilder from '@angular/forms';
import  Category  from '../../../models/cms/Category';

@Component(
    selector: 'category',
    templateUrl: 'category.template.html'
)
export class CategoryComponent

    model = new Category("dummyTitle","dummyDescription");

    onSubmit() 
        console.log(this.data);
       

有人可以指导如何处理这个问题。

【问题讨论】：

你在你的App模块文件中导入FormsModule了吗？

@ranakrunal9 谢谢，是的，我已经导入了 FormsModel。但没有收获

【参考方案1】：

如果您想在表单之外绑定提交按钮，您必须为表单提供一个 id 并将此 id 链接到具有表单属性的按钮并输入 submit：

<form id="myForm" [formGroup]="form" (ngSubmit)="onSubmit()">
...
</form>

<button form="myForm" type="submit"> 
  Submit Form 
</button>

注意：id 不必与 formGroup 名称相同

【参考方案2】：

确保该按钮位于表单内并且 type="submit"。例如，

<ion-button type="submit"></ion-button>

【参考方案3】：

在我的例子中，我的<button type="submit">Ok</button> 在表单标签之外。 它必须在表单标签内才能工作。

<form [formGroup]="myForm" (ngSubmit)="submitHandler()">

    <!-- ... form fields here ... -->

    <button type="submit">Ok</button> <!------- must be inside form -->
</form>

【讨论】：

做起来很容易，很难注意到！

【参考方案4】：

您缺少一个导入文件import NgForm from '@angular/forms';

并且您正在使用模板驱动的表单，因此您不需要 FormBuilder。

试试这个方法

signup-form.component.html

<form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>

  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>

  <button type="submit">Sign Up</button>
</form>

signup-form.component.ts

import  Component  from '@angular/core';
import  NgForm  from '@angular/forms';

@Component(
  selector: 'signup-form',
  templateUrl: 'app/signup-form.component.html',
)
export class SignupForm 
  registerUser(form: NgForm) 
    console.log(form.value);