Angular 2 RC2 формы обновления, давая ошибку

Question

, поэтому я пытаюсь обновить свои формы с RC1 до RC3. Я сделал изменения там, где я счел нужным. я до сих пор, однако получаю следующее сообщение об ошибке:

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

Вот мои 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)); 

Вот мой код компонента:

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

вот мой 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> 

Я не уверен, что ngForm изменился в RC2, или, может быть, я это неправильно понимаю. Я очень новичок в угловой, и это мое первое приложение, которое я создал с помощью Angular. Поэтому, пожалуйста, не стесняйтесь давать какие-либо советы или критические замечания.

Заранее спасибо

для дополнительной ссылки, вот мой package.json файл:

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

В вашем

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

#controlName="ngForm" удалить (в вашем случае #language="ngForm")

Этот элемент будет отсутствовать для валидаторов. Изменение валидатор от

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

Для

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

Как примечание стороны, после этой ошибки, я столкнулся дополнительные проблемы, потому что я использовал angular2-материал, который не был совместим с angular2 RC3/RC4 , Мне пришлось обновить библиотеку материалов с v2.0.0-alpha.5-2 до v2.0.0-alpha.6

Answer 2

Названия, как директивы формы экспортируются были переименованы более интуитивным.

Используйте вместо #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)