errors:There is no directive with "exportAs" set to "ngModel"

次のようなフォームコードを書くとエラーがでます。

<mat-form-field>
          <mat-label>feature</mat-label>
            <input matInput placeholder="feature" formControlName="feature" #feature="ngModel" [(ngModel)]="feature">
</mat-form-field>

error

errors:
There is no directive with "exportAs" set to "ngModel"

理由は

formControlNameとngModelディレクティブを同時に使用できないから。

be mixing Reactive forms directives, such as formControlName, with the ngModel directive. This "has been deprecated in Angular v6 and will be removed in Angular v7"

なのでV7にアップグレードする前に、どちらかにするか決めないといけない云々といったことが書かれています。

なので明らかにパワフル（そして複雑な）リアクティブフォームのformControlNameのほうを今後使用した方がいいようです。

ただ、私の確認ではAngular7.1.4を使用していますが、以下のような書き方は、確かに注意されるのですけど使えています。


<input matInput placeholder="id" formControlName="id" [(ngModel)]="item.id">

警告：
It looks like you're using ngModel on the same form field as formControlName.
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

(訳：formControlNameのあるフォームにngModelを使ってますね。v6でそれらは機能がダブりますし、v7では削除される予定です。）

別のケースの場合

いや、ngModelしか使ってないよという場合は、ミスタイプか、FormsModule, ReactiveFormsModuleをインポートしていないケースが多いかと。

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