web-dev-qa-db-ja.com

Angular 2エラー： "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);

あなたはそれが問題の原因だと思います？

angulartypescriptangular2-forms
93
Anna

2.0.0.rc6 以降：

forms：廃止予定のprovideForms()およびdisableDeprecatedForms()関数は削除されました。代わりにFormsModuleまたはReactiveFormsModuleを@angular/formsからインポートしてください。

要するに：

それで、あなたの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 { }

これらのモジュールのうちの1つを持っていないと、あなたが直面しているものも含めてエラーにつながる可能性があります。

'ngModel'にバインドすることはできません。 'input'の既知のプロパティではないためです。

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

"exportAs"を "ngForm"に設定したディレクティブはありません。

よくわからない場合は、 FormsModuleとReactiveFormsModuleの両方を 一緒に指定することもできますが、それらは別々に完全に機能します。これらのモジュールの1つを提供すると、そのモジュールのデフォルトのフォームディレクティブとプロバイダがアプリケーション全体で利用可能になります。

ngControlを使った古いフォーム？

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

たとえば、<input ngControl="actionType">と同等のものは<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属性で、これはまさにあなたが今持っているケースです。

80
acdcjunior

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

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

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

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

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

次に、インポートをbeforeEachに追加します。

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

私の場合は、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 { }
4
Dirk

Angular 2の正しい使用方法は次のとおりです。

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

古い方法はもううまくいきません

2
ioses

私はこの問題を抱えていて、自分のコンポーネントを変数に束縛していなかったことに気づきました。

かわった

<input #myComponent="ngModel" />

に

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

2
birwin

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

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

「ngModel」に設定された「exportAs」を持つディレクティブはありません

githubのバグとして報告された の場合、バグではない可能性があります。

  1. 構文エラーがある（例：追加のブラケット：[(ngModel)]]=）、または
  2. mixing Reactive Forms directives（formControlNameなど）、with ngModel directive。これは、 "Angular v6で非推奨になり、Angular v7" で削除されます。これは、両方のフォーム戦略を混合するためです。

  • 実際のngModelディレクティブが使用されているように見えますが、実際には、その動作（の一部）を単純に近似するリアクティブフォームディレクティブのngModelという名前の入出力プロパティです。具体的には、値の取得/設定および値イベントのインターセプトが可能です。ただし、ngModelのその他の機能の一部-withngModelOptionsによる更新の遅延やディレクティブのエクスポートなど-simply do n't work（...）

  • このパターンは、テンプレート駆動型とリアクティブ型の戦略を組み合わせたものです。どちらの戦略のメリットも十分に活用できないため、一般的に推奨しません。 （...）

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

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

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

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

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

ただし、参照変数の値としてngModelを追加する場合、例：

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

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

1
CPHPython

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

0
Samuel Mutemi

選択に両方の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を必ずインポートすることです。または両方インポートすることもできますが、これもまったく問題ありません。

0
Rohan Shenoy

テンプレートに[（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">
0
Raman Zhylich