Ответ 1
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule //<----------make sure you have added this.
],
....
})
Наличие зависимостей проекта:
"dependencies": {
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.2",
"ng2-bootstrap": "^1.1.1",
"reflect-metadata": "^0.1.8",
"core-js": "^2.4.0",
"es6-module-loader": "^0.17.8",
"rxjs": "5.0.0-beta.11",
"systemjs": "0.19.27",
"zone.js": "0.6.17",
"jquery": "3.0.0",
}
И этот шаблон входа:
<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
</form>
И этот компонент входа:
import { Component } from '@angular/core';
import {Http, Headers} from '@angular/http';
@Component({
moduleId: module.id,
selector: 'login-cmp',
templateUrl: 'login.component.html'
})
export class LoginComponent {
constructor($http: Http) {
this.$http = $http;
}
authenticate(data) {
...
}
}
У меня есть эта ошибка:
zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
<form [ERROR ->]#loginForm="ngForm"
(ngsubmit)="authenticate(loginForm.value)">
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule //<----------make sure you have added this.
],
....
})
Вам нужно импортировать FormsModule
не только в корневой AppModule, , но и в каждый subModule, который использует любые директивы форм angular.
// SubModule A
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule //<----------make sure you have added this.
],
....
})
Я знаю, что это старый пост, но я хотел бы поделиться своим решением. Я добавил " ReactiveFormsModule " в массиве import [], чтобы устранить эту ошибку
Ошибка: нет директивы с "exportAs", установленным в "ngForm" ("
Fix:
module.ts
import {FormsModule, ReactiveFormsModule } из '@angular/forms'
imports: [
BrowserModule,
FormsModule ,
ReactiveFormsModule
],
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule],
...
})
(На всякий случай кто-то слепой, как я)
form
FTW! Обязательно используйте тег <form>
не работает:
<div (ngSubmit)="search()" #f="ngForm" class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">Go!</button>
</span>
<input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</div>
работает как прелесть:
<form (ngSubmit)="search()" #f="ngForm" class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">Go!</button>
</span>
<input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</form>
проверьте, импортируете ли вы FormsModule. Там нет ngControl в новых формах угловой версии 2 выпуска. Вы должны изменить свой шаблон в качестве примера
<div class="row">
<div class="form-group col-sm-7 col-md-5">
<label for="name">Name</label>
<input type="text" class="form-control" required
[(ngModel)]="user.name"
name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
</div>
Две вещи, которые вы должны заботиться..
Если вы используете субмодуль, вы должны импортировать FormModule в этот субмодуль.
**imports:[CommonModule,HttpModule,FormsModule]**
Вы должны экспортировать FormModule в модуль
**exports:[FormsModule],**
поэтому вместе это выглядит как импорт: [CommonModule, HttpModule, FormsModule], экспорт: [FormsModule],
в верхней части вы должны импортировать FormsModule
import {FormsModule} из '@angular/forms';
если вы используете только app.module.ts, то
Я столкнулся с этой проблемой, но ни один из ответов здесь не работал у меня. Я googled и обнаружил, что FormsModule not shared with Feature Modules
Итак, если ваша форма находится в функциональном модуле, вам нужно импортировать и добавить FromsModule
там.
Пожалуйста, напишите: https://github.com/angular/angular/issues/11365
В дополнение к импорту модуля формы в файл ts компонента входа необходимо также импортировать NgForm.
import { NgForm } from '@angular/forms';
Это решило мою проблему
Вы должны импортировать FormsModule и затем поместить его в раздел импорта.
import { FormsModule } from '@angular/forms';
Просто, если у вас нет модуля импорта, импортируйте и объявляйте import {FormsModule} из '@angular/forms';
и если вы это сделали, то вам просто нужно удалить formControlName = 'what' из полей ввода.
Вы должны завершить приложение с помощью Ctrl + C и повторно запустить его с помощью NG serve
У меня была такая же проблема и я решил ее обновить все зависимости (package.json) следующей командой npm update -D && npm update -S
Как указал @Günter Zöchbauer, сначала включите FormsModule.