角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中发生了变化，或者我可能不正确地理解它。我是非常新的角度，这是我第一次应用，我已经建立使用角。因此，请随时提供任何建议或批评。

提前感谢

为了获得额外的参考，下面是我的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.6 5-2升级到v2.0.0-alpha.6 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

表格: ngModel应以ngModel (8e6e90e)的形式导出