2016-12-14 4 views
1

Я только начал Angular2 и обращенную следующее сообщение об ошибке, когда добавить (ngSubmit) атрибут моей формы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); 
    } 
} 

Может кто-то пожалуйста, руководство, как справиться с этой проблемой.

+0

вы импортированы 'FormsModule' в вашем Файл модуля приложения? – ranakrunal9

+0

@ ranakrunal9 Спасибо, да, я импортировал FormsModel. Но никакой выгоды –

ответ

7

вам не хватает импорта файла import { NgForm } from '@angular/forms';

и вы используете шаблон Driven формы, так что вам не нужно FormBuilder.

попробовать этот путь

регистрацию-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); 
    } 
} 
Смежные вопросы