Angular2 - Form Directive not working

1k views Asked by At

I've just started working in Angular2. Right now, i'm facing issue when add form directive to Form. I've following html form. For sake of simplicity, i'm just putting over here the necessary fields. I've named my component Category.
Following is Category Model

export class Category {
    Title: string;    
    Description: string;

    constructor(Title: string, Description: string) {
        this.Title = Title;
        this.Description = Description;
    }   
}

Following is category.template file

<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>

Following is 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);
    }   
}

And this is the error that i get.

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


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

Please help me how to resolve this error.

0

There are 0 answers