There is no directive with "exportAs" set to "ngForm" in Angular 2.0 or 4.0

Error got is : There is no directive with "exportAs" set to "ngForm"  for below html.

<div class="container">
    <form #ProdForm="ngForm" (ngSubmit)="onSubmit($event)" autocomplete="off">
        <div class="form-horizontal">
            <h3> Product Form</h3>
            <div class="form-group">
                <label for="inputText" class="control-label col-xs-2">Number</label>
                <div class="col-xs-10">
                    <input type="number" class="form-control" id="txtCustomerName" placeholder="Product Number" required [(ngModel)]="editProduct.id">
                </div>
            </div>
            <div class="form-group">
                <label for="inputText" class="control-label col-xs-2">Name</label>
                <div class="col-xs-10">
                    <input type="text" class="form-control" id="txtCustomerName" placeholder="Product Name" required [(ngModel)]="editProduct.pname" #pname="ngModel">
                    <div [hidden]="pname.valid || pname.pristine" class="alert alert-danger"> Required Product Name   </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputText" class="control-label col-xs-2">Location</label>
                <div class="col-xs-10">
                    <input type="text" class="form-control" id="txtCustomerName" placeholder="location" required [(ngModel)]="editProduct.location">
                </div>
            </div>
            <!--<button (click)="AddProduct(pNum.value,pName.value,loc.value)" class="btn btn-success">Add Product</button>-->
            <button class="btn btn-default" (click)="DisplayEmptyProduct();ProdForm.reset()">Reset</button>
            <button  class="btn btn-success" (click)="AddProduct()">Add Product</button>
        </div>
    </form>
    <table class="table table-bordered table-striped table-responsive">
        <thead>
            <tr>
                <th>Number</th>
                <th>Name</th>
                <th>Location</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let p of _products">
                <td>{{p.id}}</td>
                <td>{{p.pname}}</td>
                <td>{{p.location}}</td>
                <td>
                    <button class="btn btn-danger" (click)="DeleteProduct(p.id)">Delete</button>
                    <button class="btn btn-group-lg" (click)="EditDisplayProduct(p.id)">Edit</button>
                </td>
            </tr>
        </tbody>
    </table>
    <br />

<br>

Issue was with not using FormsModule in NgModule.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProductComponenet } from './product.component';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [BrowserModule, FormsModule ],
  declarations: [AppComponent, ProductComponenet ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }