Angular 2 RC2 Formen Upgrade Fehler geben

Question

, also ich versuche, meine Formulare von RC1 auf RC3 zu aktualisieren. Ich habe Änderungen vorgenommen, wo ich es für richtig hielt. Ich bin aber immer noch die folgende Fehlermeldung erhalten:

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"> 

Hier ist mein 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)); 

Hier mein Komponentencode ist:

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

hier mein HTML ist:

Ich bin mir nicht sicher, ob ngForm in RC2 geändert hat, oder vielleicht verstehe ich es falsch. Ich bin sehr neu in eckigen und das ist meine erste Anwendung, die ich mit Angular gebaut habe. Also zögern Sie nicht, einen Rat oder eine Kritik zu geben.

Vielen Dank im Voraus

für zusätzliche Referenz, hier ist meine package.json Datei:

{ 
    "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 Ihrem

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

entfernen die #controlName="ngForm" (in Ihrem Fall #language="ngForm")

Dieses Element würde dann für Validatoren fehlen. Ändern Sie den Validator von

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

Um

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

Als Randbemerkung, nach diesem Fehler, ich weitere Fragen konfrontiert war, weil ich angular2-Material verwendet wird, die nicht kompatibel mit angular2 RC3/RC4 war . Ich musste die Materialbibliothek von v2.0.0-alpha.5-2 auf v2.0.0-alpha.6 aktualisieren

Answer 2

Die Namen wie Form Richtlinien exportiert wurden intuitiver sein umbenannt.

Verwenden statt #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)