title: Angular 2: 'ngFormModel' since it isn't a known native property
body: <blockquote>
    <p>My error is</p>
  </blockquote>
  
  <pre><code> EXCEPTION: Error: Uncaught (in promise): Template parse errors:
  Can't bind to 'ngFormModel' since it isn't a known native property ("
  &lt;h3 class = "head"&gt;MY PROFILE&lt;/h3&gt;
  
  &lt;form  [ERROR -&gt;][ngFormModel]="form" (ngSubmit)="onSubmit(form.value)"&gt;
  
   &lt;div class="row"&gt;
  "): a@3:7
  There is no directive with "exportAs" set to "ngForm" ("stname&lt;/label&gt;
          &lt;input type="text" id="facebook" class="form-control"  ngControl="firstname" [ERROR -&gt;]#firstname="ngForm" &gt;  
     &lt;/div&gt;
  
  "): a@9:85
  There is no directive with "exportAs" set to "ngForm" ("/label&gt;
          &lt;input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" [ERROR -&gt;]#lastname="ngForm" &gt;  
      &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>My template,</p>
  </blockquote>
  
  <pre><code>&lt;h3 class="head"&gt;MY PROFILE&lt;/h3&gt;
  
  &lt;form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)"&gt;
  
      &lt;div class="row"&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="formHeading"&gt;firstname&lt;/label&gt;
              &lt;input type="text" id="facebook" class="form-control" ngControl="firstname" #firstname="ngForm"&gt;
          &lt;/div&gt;
  
          &lt;div *ngIf="firstname.touched"&gt;
              &lt;div *ngIf="!firstname.valid" class="alert alert-danger"&gt;
                  &lt;strong&gt;First name is required&lt;/strong&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="form-group"&gt;
              &lt;label class="formHeading"&gt;lastname&lt;/label&gt;
              &lt;input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" #lastname="ngForm"&gt;
          &lt;/div&gt;
  
          &lt;div *ngIf="lastname.touched"&gt;
              &lt;div *ngIf="!lastname.valid" class="alert alert-danger"&gt;
                  &lt;strong&gt;Last name is required&lt;/strong&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="form-group"&gt;
              &lt;label class="formHeading"&gt;Profilename&lt;/label&gt;
              &lt;input type="text" id="facebook" class="form-control col-xs-3" ngControl="profilename" #profilename="ngForm"&gt;
          &lt;/div&gt;
  
  
  
          &lt;div class="form-group"&gt;
              &lt;label class="formHeading"&gt;Phone&lt;/label&gt;
              &lt;input type="text" id="facebook" class="form-control col-xs-3" ngControl="phone" #phone="ngForm"&gt;
          &lt;/div&gt;
  
          &lt;div *ngIf="phone.touched"&gt;
              &lt;div *ngIf="!phone.valid" class="alert alert-danger"&gt;
                  &lt;strong&gt;Phone number is required&lt;/strong&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;label class="formHeading"&gt;Image&lt;/label&gt;
          &lt;input type="file" name="fileupload" ngControl="phone"&gt;
  
          &lt;div class="form-row btn"&gt;
  
              &lt;button type="submit" class="btn btn-primary  " [disabled]="!form.valid"&gt;Save&lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <blockquote>
    <p>My Component</p>
  </blockquote>
  
  <pre><code>import {Component} from '@angular/core';
  import { Http, Response, Headers} from '@angular/http';
  import {Observable} from 'rxjs/Observable';
  import {Subject} from 'rxjs/Subject';
  import {contentHeaders} from '../headers/headers';
  import {FORM_DIRECTIVES} from '@angular/forms';
  import {Router, ROUTER_DIRECTIVES} from '@angular/router';
  import {Control, FormBuilder, ControlGroup, Validators} from '@angular/common';
  
  @Component({
      templateUrl: './components/profile/profile.html',
      directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
  })
  
  export class Profile {
  
      http: Http;
  
      form: ControlGroup;
  
      constructor(fbld: FormBuilder, http: Http, public router: Router) {
          this.http = http;
          this.form = fbld.group({
              firstname: ['', Validators.required],
              lastname: ['', Validators.required],
              profilename: ['', Validators.required],
              image: [''],
              phone: [''],
  
          });
  
      }
  
  
      onSubmit(form: any) {
  
          console.log(form);
          let body = JSON.stringify(form);
          var headers = new Headers();
          this.http.post('http://localhost/angular/index.php/profile/addprofile', body, {
                  headers: headers
              })
              .subscribe(
                  response =&gt; {
                      if (response.json().error_code == 0) {
                          alert('added successfully');
                          this.router.navigate(['/demo/professional']);
                      } else {
                          alert('fail');
  
                      }
  
                  });
      }
  
  }
  </code></pre>