Ошибка 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.

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

Я столкнулся с той же проблемой. Я пропустил тег импорта модуля форм в 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параметров или экспорт директивы - просто не работают (...)

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

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

Когда у вас есть такой ввод:

<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вас также должно быть такое свойство, как это [(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>

Еще одна важная вещь - убедитесь, что вы выполняете импорт либо 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">