Ошибка Angular2: нет директивы с параметром exportAs, установленным в ngForm

Поскольку 2.0.0.rc6 < / а>:

• Если вы используете формы на основе шаблонов, добавьте 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".

Итак, итоговый шаблон должен быть (===>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 - например, задержка обновлений с помощьюngModelOptions или экспорт директивы - просто не работают (...)

• в этом шаблоне сочетаются стратегии, основанные на шаблонах, и стратегии реактивных форм, которые мы обычно не рекомендуем, поскольку они не используют все преимущества любой из этих стратегий. (...)

• Чтобы обновить свой код до версии 7, вам нужно будет решить, следует ли придерживаться директив реактивной формы (и получать / устанавливать значения с помощью шаблонов реактивных форм) или переключиться на директивы, управляемые шаблонами < / сильный>.

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

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