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」の既知のプロパティではないため、バインドできません。

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

「exportAs」が「ngForm」に設定されたディレクティブはありません

疑問がある場合は、FormsModuleとの両方を提供できますReactiveFormsModuleが、それらは個別に完全に機能します。これらのモジュールのいずれかを提供すると、そのモジュールのデフォルトのフォームディレクティブとプロバイダーがアプリ全体で利用可能になります。

古いフォームを使用してngControl？

これらのモジュールがにある@NgModule場合は、おそらくのような古いディレクティブを使用していますがngControl、これは問題ngControlです。新しい形式にはないからです。それは多かれ少なかれ * に置き換えられましたngModel。

たとえば、<input ngControl="actionType">is <input ngModel name="actionType">と同等なので、テンプレートで変更します。

同様に、コントロールでのエクスポートはngFormもう行われていませんngModel。したがって、あなたのケースでは、に置き換え#actionType="ngForm"てください#actionType="ngModel"。

したがって、結果のテンプレートは（===>sが変更された場所）になるはずです。

<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属性です。あなたが今持っているまさにそのケースです。

私は同じ問題に直面しました。app.module.tsのフォームモジュールインポートタグを見逃していた

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

FormsModuleを.spec.tsに追加することで解決した同じ問題がありました。

import { FormsModule } from '@angular/forms';

そして、beforeEachにインポートを追加します：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

代わりにこれを取得している場合：

エラー：テンプレート解析エラー：

何のディレクティブは、「に設定された「EXPORTAS」ではありませんngModel」

これはgithubのバグとして報告されましたが、おそらくバグではない可能性があります：

1. 構文エラーがある（例：余分な括弧：）[(ngModel)]]=、または
2. こと反応フォームディレクティブ混合などをformControlName、とngModelディレクティブ。これは、「Angular v6で非推奨になり、Angular v7で削除される」というものです。これは、両方のフォーム戦略が混在しているためです。

• 実際のngModelディレクティブが使用されているように見えますが、実際には、ngModelその動作（の一部）を単純に近似する反応フォームディレクティブで指定された入出力プロパティです。具体的には、値を取得/設定し、値イベントをインターセプトできます。ただし、他の一部ngModelの機能 - ngModelオプションによる更新の遅延やディレクティブのエクスポートなど- は機能しません（...）

• このパターンは、テンプレート駆動型と反応型のフォーム戦略を組み合わせたものであり、どちらの戦略のメリットも十分に活用していないため、通常はお勧めしません。（...）

• v7より前のコードを更新するには、リアクティブフォームディレクティブ（およびリアクティブフォームパターンを使用して値を取得/設定）を使用するか、テンプレート駆動型ディレクティブに切り替えるかを決定します。

次のような入力がある場合：

<input formControlName="first" [(ngModel)]="value">

ブラウザーのコンソールに混合形式の戦略に関する警告が表示されます。

とngModel同じフォームフィールドを使用しているようですformControlName。

ただし、ngModel参照変数の値としてを追加すると、次のようになります。

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

その後、上記のエラーがトリガーされ、戦略の混合に関する警告は表示されません。

私の場合は、追加する必要がありましたFormsModuleし、ReactiveFormsModuleにshared.module.tsすぎ：

（コード例については@Undriumに感謝します）：

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

この問題があり、コンポーネントを変数にバインドしていないことに気付きました。

かわった

<input #myComponent="ngModel" />

に

<input #myComponent="ngModel" [(ngModel)]="myvar" />

Angular2での正しいフォームの使用方法は次のとおりです。

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

古い方法はもう機能しません

また、リアクティブフォームとテンプレートフォームのアプローチを組み合わせようとすると、この問題が発生します。私が持っていた#name="ngModel"と[formControl]="name"同じ要素に。いずれかを削除すると、問題が修正されました。また、使用する#name=ngModel場合はthisなどのプロパティも必要です[(ngModel)]="name"。それ以外の場合は、引き続きエラーが発生します。これは角度6、7、8にも適用されます。

ngModel and name選択に両方の属性があることを確認してください。また、Selectはフォームコンポーネントではなくフォームコンポーネントであるため、ローカル参照のより論理的な宣言は次のようになります。

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
            ngControl="actionType" 
      ===>  #actionType="ngModel"
            ngModel    // You can go with 1 or 2 way binding as well
            name="actionType"
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

もう1つ重要なことはFormsModule、テンプレート駆動型アプローチReactiveFormsModuleの場合またはリアクティブアプローチの場合のいずれかでインポートすることを確認することです。または、両方をインポートすることもできます。

ngModule入力で機能しない場合は、次のことを試してください...二重引用符を削除してくださいngModule

お気に入り

<input #form="ngModel" [(ngModel)]......></input>

上記の代わりに

<input #form=ngModel [(ngModel)]......></input> try this

テンプレートの[（ngModel）]]の近くにタイプミスがあったため、この問題が発生しました。余分なブラケット。例：

<input id="descr" name="descr" type="text" required class="form-control width-half"
      [ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
      [disabled]="isDescrReadOnly" #descr="ngModel">