[解決済み】Angular2エラー。exportAs "が "ngForm "に設定されたディレクティブは存在しません。

質問

RC4 を使用しているのですが、エラーが発生します。 exportAs" が "ngForm" に設定されているディレクティブはありません。 私のテンプレートが原因です。

<div class="form-group">
        <label for="actionType">Action Type</label>
        <select
            ngControl="actionType" 
      ===>  #actionType="ngForm" 
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

boot.ts :

import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HTTP_PROVIDERS, Http} from '@angular/http';
 import {provideRouter} from '@angular/router';

import {APP_ROUTER_PROVIDER} from './routes';

import {AppComponent} from './app.component';

bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);

/// これが私のDropdownListです :

<fieldset ngControlGroup="linkedProcess" >
                     <div ngControlGroup="Process" >
                         <label>Linked Process</label>
                          <div class="form-group">       
        <select 
            ngModel
            name="label" 
            #label="ngModel" 
            id="label" 
            class="form-control" required
            (change)="reloadProcesse(list.value)" 
            #list>
            <option value=""></option>
            <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>-->                 
            <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" 
            value="{{ processus[i].Process.label}}">
                {{processus.Process.label}}
            </option>
        </select> 
        </div>
     </div>

//私のコンポーネントts :

昔のフォームでは、このように表現していました。

 categoryControlGroups:ControlGroup[] = [];
     categories:ControlArray = new ControlArray(this.categoryControlGroups);

そして今、私はこうしています。

categoryControlGroups:FormGroup[] = [];
     categories:FormArray = new FormArray(this.categoryControlGroups);

それが原因だと思うのですか？

解決方法は？

以来 2.0.0.rc6 :

フォーム 非推奨 provideForms() と disableDeprecatedForms() 関数は削除されました。このため FormsModule または ReactiveFormsModule から @angular/forms の代わりに

要するに

• を使用する場合 テンプレート駆動型フォーム を追加します。 FormsModule を、あなたの @NgModule .
• を使用する場合 モデル駆動型フォームに ReactiveFormsModule を @NgModule .

だから に追加してください。 app.module.ts またはそれに準ずるもの。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,                               // <========== Add this line!
    ReactiveFormsModule                        // <========== Add this line!
  ],
  declarations: [
    AppComponent
    // other components of yours
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

これらのモジュールのいずれかがないと、あなたが直面しているようなエラーが発生する可能性があります。

ngModel' は 'input' の既知のプロパティではないので、バインドできません。

formGroup' は 'form' の既知のプロパティではないので、バインドできません。

exportAs" が "ngForm" に設定されているディレクティブは存在しません。

迷ったら の両方を提供することができます。 その FormsModule と ReactiveFormsModule を一緒に使うこともできますが、別々に使っても十分に機能します。これらのモジュールのいずれかを提供すると、そのモジュールのデフォルトのフォームディレクティブとプロバイダが、アプリ全体で利用できるようになります。

旧来のフォームを使用 ngControl ?

もし、これらのモジュールが @NgModule のような古いディレクティブを使用している可能性があります。 ngControl がないので、問題です。 ngControl を新しいフォームに追加しました。それは 多かれ少なかれ * である。 ngModel .

例えば、これに相当するのは <input ngControl="actionType"> は <input ngModel name="actionType"> ので、テンプレートで変更してください。

同様に、コントロールでのエクスポートは ngForm はもうなく、現在では ngModel . ですから、あなたの場合は、次のように置き換えます。 #actionType="ngForm" で #actionType="ngModel" .

ですから、出来上がったテンプレートは、( ===> を変更した場合)。

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
  ===>  ngModel
  ===>  name="actionType" 
  ===>  #actionType="ngModel" 
        id="actionType" 
        class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
            {{ actionType.label }}
        </option>
    </select> 
</div>

* のすべての機能を備えているわけではないので、多かれ少なかれ。 ngControl に移動しました。 ngModel . いくつかは単に削除されたり、今は違うものになっています。例としては name 属性は、今まさにあなたが抱えているケースと同じです。