Angular 2: 'ngFormModel' since it isn't a known native property

Question

My error is

 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can\'t bind to \'ngFormModel\' since it isn\'t a kn         


        

Answer 1

I had the same issue. What I did to solve it:

• remove the tag, and add (click)-function to the button
• checked my backend: there was an error in some special event... fixed it

Now it doesn't fire twice anymore. So double check this! You never know...

Answer 2

The problem is that you're still importing from common and especially using the instructions of the old forms. Import correctly the components for new forms:

import {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

And correct the component:

@Component({
    ...
    directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES]
})
export class AppComponent {

    form: FormGroup;

    constructor(fbld: FormBuilder) {

        this.form = fbld.group({
            ...

        });


    }

    ...

}

Then correct the view: ngFormModel has been replaced by formGroup, and use formControl for your fields:

<form  [formGroup]="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 ="form.controls['firstname'].touched">
            <div *ngIf ="!form.controls['firstname'].valid" class = "alert alert-danger">
            <strong>First name is required</strong>
            </div>  
        </div>

        ... 

        <div class="form-row btn">

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

        </div>

    </div>
</form>

Edit. From Angular 2.0.0-rc.5, is necessary to remove the directives from the component and import the form modules in AppModule:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ],
    ...
    bootstrap: [AppComponent]
})

export class AppModule { }

If you use a shared module, do not forget to export them:

@NgModule({
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ],
    exports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ]
})

export class SharedModule { }

Answer 3

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>

Finally do this in your bootstrapping,

import {provideForms, disableDeprecatedForms} from '@angular/forms';
bootstrap(MyDemoApp, [
provideForms(),
disableDeprecatedForms()]);