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

Ответ 1

Начиная с 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, тот самый случай, который у вас сейчас есть.

Ответ 2

Я столкнулся с той же проблемой. Я пропустил тег импорта модуля формы в app.module.ts

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

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

Ответ 3

У меня была та же проблема, которая была решена путем добавления FormsModule в .spec.ts:

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

а затем добавление импорта до начала:

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

Ответ 4

В моем случае мне пришлось добавить 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 { }

Ответ 5

Правильный способ использования форм теперь в 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>

Старый способ больше не работает

Ответ 6

У меня была эта проблема, потому что в моем шаблоне была опечатка рядом с [(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">

Ответ 7

У меня была эта проблема, и я понял, что не связывал свой компонент с переменной.

Изменено

<input #myComponent="ngModel"/>

в

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