nlr_p nlr_p - 3 months ago 17
AngularJS Question

'ngFormModel' since it isn't a known native property (",angular-2

My error is,

EXCEPTION: Error: Uncaught (in promise): Template parse errors:


Can't bind to 'ngFormModel' since it isn't a known native property ("

MY PROFILE

][ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">


"): a@3:7
There is no directive with "exportAs" set to "ngForm" ("stname
]#firstname="ngForm" >



"): a@9:85
There is no directive with "exportAs" set to "ngForm" ("/label>
]#lastname="ngForm" >



My template,

<h3 class = "head">MY PROFILE</h3>

<form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">

<div class="row">

<div class="form-group">
<label class="formHeading">firstname</label>
<input type="text" id="facebook" class="form-control" ngControl="firstname" #firstname="ngForm" >
</div>

<div *ngIf ="firstname.touched">
<div *ngIf ="!firstname.valid" class = "alert alert-danger">
<strong>First name is required</strong>
</div>
</div>


<div class="form-group">
<label class="formHeading">lastname</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" #lastname="ngForm" >
</div>

<div *ngIf ="lastname.touched" >
<div *ngIf = "!lastname.valid" class = "alert alert-danger">
<strong>Last name is required</strong>
</div>
</div>




<div class="form-group">
<label class="formHeading">Profilename</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="profilename" #profilename="ngForm" >
</div>



<div class="form-group">
<label class="formHeading">Phone</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="phone" #phone="ngForm" >
</div>

<div *ngIf ="phone.touched" >
<div *ngIf = "!phone.valid" class = "alert alert-danger">
<strong>Phone number is required</strong>
</div>
</div>

<label class="formHeading">Image</label>
<input type="file" name="fileupload" ngControl="phone">



<div class="form-row btn">

<button type="submit" class="btn btn-primary " [disabled]="!form.valid">Save</button>
</div>

</div>
</form>


My Component,
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 => {
if(response.json().error_code ==0){
alert('added successfully');
this.router.navigate(['/demo/professional']);
}
else{
alert('fail');

}

})
}


}

Answer

Just import the following statement in ts,

import {FORM_DIRECTIVES, FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],

Make the following changes in templates,

<h3 class = "head">MY PROFILE</h3>

 <form  [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
 <div class="row">
  <div class="form-group">     
     <label class="formHeading">firstname</label>
   <input type="text" id="facebook" class="form-control"   [formControl]="form.controls['firstname']">  
   </div>
       <div *ngIf ="firstname.touched">
      <div *ngIf ="!firstname.valid" class = "alert alert-danger">
       <strong>First name is required</strong>
  </div>  
 </div>
<div class="form-group">
<label class="formHeading">lastname</label>
<input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['lastname']">  
   </div>
  <div *ngIf ="lastname.touched" >
     <div *ngIf = "!lastname.valid" class = "alert alert-danger">
         <strong>Last name is required</strong>
     </div>
   </div>
    <div class="form-group">
   <label class="formHeading">Profilename</label>
    <input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['profilename']" >  
 </div>
   <div class="form-group">
  <label class="formHeading">Phone</label>
   <input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['phone']">  
   </div>

  <div *ngIf ="phone.touched" >
     <div *ngIf = "!phone.valid" class = "alert alert-danger">
        <strong>Phone number is required</strong>
     </div>
  </div>

 <div class="form-row btn">
<button type="submit" class="btn btn-primary  "    [disabled]="!form.valid">Save</button>
</div>