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

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:

    


        
     
            firstname
              
        

        

            

            First name is required
            
  
        

        ... 

        


            Save

        

    

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