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

109

Я использую 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);

вы думаете, это причина проблемы ??

Анна
источник
Какую версию ты используешь? Вы форсировали формы?
acdcjunior

Ответы:

98

Начиная с 2.0.0.rc6 :

формы : устаревшие 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 { }

Отсутствие одного из этих модулей может привести к ошибкам, в том числе к той, с которой вы столкнулись:

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

acdcjunior
источник
спасибо за ваш ответ, когда я его изменил, у меня возникла ошибка. Невозможно назначить ссылку или переменную , это что-то говорит вам?
Anna
Хм .. может быть где то еще. У вас есть <input>внутри *ngFor? (Вероятно , не будет работать , но попробуйте это и скажите мне , если сообщение уходит: <option *ngFor="let actionType of actionTypes; let i = index" value="{{ actionTypes[i].label }}"> {{ actionTypes[i].label }} </option>)
acdcjunior
Есть ли у вас <input> внутри *ngFor?
acdcjunior
Попробуйте переименовать переменную внутри во *ngForчто-то другое, а не в actionTypeлюбое хорошее?
acdcjunior
нет, у меня нет, но у меня есть выпадающий список выбора, который я повторяю, я не знаю, является ли он источником ошибки, пожалуйста, взгляните на мой обновленный вопрос ...
Анна
61

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

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

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],
Чандан
источник
2
спасибо за это, все работало нормально, но должно быть app.module.ts, а не app.module.component.ts
Салим
У меня это не работает, хотя я уже поместил импорт FormsModule в свой app.module
emirhosseini
9

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

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

а затем добавляем импорт в beforeEach:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));
Юха Ристолайнен
источник
5

Если вместо этого вы получаете это:

Ошибка: ошибки синтаксического анализа шаблона:

Нет директивы с параметром "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">

Затем появляется указанная выше ошибка, и предупреждения о смешивании стратегий не отображаются.

CPHPython
источник
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 { }
кортик
источник
Это решило мою проблему. Недостаточно просто добавить его в app.module
emirhosseini
3

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

Изменено

<input #myComponent="ngModel" />

к

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

Бирвин
источник
2

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

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

иозы
источник
1

Также осознал, что эта проблема возникает при попытке объединить подходы к реактивной форме и шаблонной форме. У меня #name="ngModel"и [formControl]="name"на том же элементе. Удаление любого из них устранило проблему. Также не то, что, если вы используете, у #name=ngModelвас также должно быть такое свойство, как это [(ngModel)]="name", иначе вы все равно получите ошибки. Это относится и к угловым 6, 7 и 8.

Самуэль Мутеми
источник
0

Убедитесь, что вы 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в случае реактивного подхода. Или вы можете импортировать оба, что тоже нормально.

Рохан Шеной
источник
0

если ngModuleне работает во вводе, значит попробуйте ... удалите двойные кавычки вокругngModule

лайк

<input #form="ngModel" [(ngModel)]......></input>

вместо выше

<input #form=ngModel [(ngModel)]......></input> try this
user13482587
источник
-1

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