Angular 2 RC2 forms upgrade giving error

Question

so i am trying to upgrade my forms from RC1 to RC3. I have made changes where i saw fit. i am still however getting the following error:

 There is no directive with "exportAs" set to "ngForm" ("         <input id="language" type="text" [(ngModel)]="language.strName" formControlName="language" [ERROR ->]#language="ngForm" class="form-control inputSize">

Here is my main.ts

 import {enableProdMode} from '@angular/core';
 import { bootstrap }    from '@angular/platform-browser-dynamic';
 import { HTTP_PROVIDERS } from '@angular/http';
 import { AppComponent } from './components/app.component';
 import { disableDeprecatedForms, provideForms } from '@angular/forms';

 enableProdMode()
 bootstrap(AppComponent, [
 HTTP_PROVIDERS,
 disableDeprecatedForms(),
 provideForms()
 ])
 .catch(error=> console.log(error));

Here is my component code:

import { Component } from '@angular/core';
import { LanguageMaintenance } from '../Dataclasses/languagemaintenance'
/// <reference path="../typings/bootstrap/bootstrap.d.ts" />
import { NavigationService } from '../services/navigation.service';
import { Http, Response } from '@angular/http';
import { LanguageService } from '../services/language.service';
import { NavbarComponent } from './navbar.component'
// import {FormBuilder, ControlGroup, Control, Validators} from     '@angular/common'
import { NgForm } from '@angular/common';
import { FormControl, FormArray, FormGroup, REACTIVE_FORM_DIRECTIVES, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'languagemaintenance',
  templateUrl: '../component.html/languagemaintenance.component.html',
  directives: [NavbarComponent, REACTIVE_FORM_DIRECTIVES],
  providers: [LanguageService]
})

export class LanguageMaintenanceComponent {
    public languageUrl: string;
    public http: Http;
    showAddContainer: Boolean = false;
    showEditContainer: Boolean = false;
    editingLanguages: boolean;
    Languages: LanguageMaintenance[];
    // LanguagesMaintenance: String[];
    isLanguageSelected: boolean;
    activeLanguage: LanguageMaintenance;
    saveEditedLanguage: LanguageMaintenance;
    editLanguageSelected: boolean;
    allowLanguageNaviagation: boolean;
    form: FormGroup;
    edittedForm: FormGroup;
    activeDiv: string;
    isLoading: boolean;


    constructor(private _navigationService: NavigationService, private _languageService: LanguageService, private formBuilder: FormBuilder) {
        this.isLanguageSelected = false;
        this.editingLanguages = false;
        this.editLanguageSelected = false;
        this.allowLanguageNaviagation = false;
        this.activeLanguage = new LanguageMaintenance();
        this.saveEditedLanguage = new LanguageMaintenance();
        this.activeDiv = "";
        this.isLoading=true;


       // this.getLanguage();
    }
    ngOnInit() {
        this.getLanguages();
        this.isLoading= false;
   }

    getLanguages() {
        this._languageService.getLanguages().subscribe((data) => {
            this.Languages = data;
            this.isLoading= false;
        }, error=>{
            this.isLoading= false;
           console.log(error);
        });


    }

    addLanguage() {

        this.showAddContainer = true;
        this.showEditContainer = false;
        this.activeLanguage = null;
        this.activeDiv = null;

        this.form = new FormGroup({
            language: new FormControl('', Validators.required),
            interfaceculture: new FormControl('', Validators.required),
            culture: new FormControl('', Validators.required),
            description: new FormControl('', Validators.required)
        })
    }

here is my HTML:

            <div class="form-group">
                <label class="col-lg-3" for="language">Language:</label>
                <input id="language" type="text" [(ngModel)]="language.strName" formControlName="language" #language="ngForm" class="form-control inputSize">

            </div>

i am not sure if ngForm has changed in RC2, or maybe im understanding it incorrectly. I am very new to angular and this is my first application i have built using Angular. So please feel free to give any advice or critique.

Thanks in advance

for extra reference, here is my package.json file:

{
  "name": "translatasaurus",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watch-css\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "build-css": "node-sass --include-path scss scss/main.scss css/main.css",
    "watch-css": "nodemon -e scss -x \"npm run build-css\""
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.3",
    "angular2-infinite-scroll": "^0.1.4",
    "bootstrap": "^3.3.6",
    "es6-shim": "^0.35.0",
    "lodash": "^4.12.0",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.0.16",
    "ng2-pagination": "^0.3.4",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "node-sass": "^3.7.0",
    "nodemon": "^1.9.2",
    "typescript": "^1.8.10",
    "typings": "^0.8.1"
  }

}

Answer 1

In your

<input ... #controlName="ngForm"...>

remove the #controlName="ngForm" (in your case #language="ngForm")

This element would then be missing for validators. Change the validator from

<div *ngIf="!controlName.untouched>Error!</div>

To

<div *ngIf="formGroupName.controls.controlName.required>Error!</div>

As a side note, after this error, I was facing further issues because I was using angular2-material, which was not compatible with angular2 RC3/ RC4. I had to upgrade the material library from v2.0.0-alpha.5-2 to v2.0.0-alpha.6

Answer 2

The names how form directives are exported were renamed to be more intuitive.

Use instead #language="ngModel"

<input id="language" type="text" [(ngModel)]="language.strName" formControlName="language" #language="ngModel" class="form-control inputSize">

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc3-2016-06-21

forms: ngModel should export as ngModel (8e6e90e)