У меня возникла следующая ошибка при запуске моего приложения "Угловое", даже если компонент не отображается.
Я должен прокомментировать, чтобы мое приложение работало.
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
<div>
<label>Created:</label>
<input type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
</div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:
Я смотрю на плунжера Героя, но я не вижу никакой разницы.
Вот файл компонента:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';
@Component({
selector: 'intervention-details',
templateUrl: 'app/intervention/details/intervention.details.html',
styleUrls: ['app/intervention/details/intervention.details.css']
})
export class InterventionDetails
{
@Input() intervention: Intervention;
public test : string = "toto";
}
Да, что это, в app.module.ts, я просто добавил:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
Чтобы иметь возможность использовать двустороннюю привязку данных для входных данных формы, вам нужно импортировать пакет FormsModule
в ваш модуль Angular
.
Для получения дополнительной информации см. Официальный Angular 2
учебник здесь и официальную документацию для forms
import { FORM_DIRECTIVES } from '@angular/forms';
и добавил FORM_DIRECTIVES
в директивы, и да, моя привязка снова работает (чтобы было ясно, что она работала до выпуска rc5)
Для использования [(ngModel)]
в Angular 2, 4 & 5+, вам нужно импортировать FormsModule из угловой формы...
Также он находится на этом пути под формами в Angular repo в github:
угловые/пакеты/формы/src/директивы/ng_model.ts
Вероятно, это не очень нравится разработчикам AngularJs, так как вы всегда могли использовать ng-model везде в любое время, но поскольку Angular пытается отделить модули, чтобы использовать то, что вы хотели бы использовать в то время, ngModel теперь находится в FormsModule,
Также, если вы используете ReactiveFormsModule, вам также необходимо импортировать его.
Так просто ищет app.module.ts и убедитесь, что вы импортировали FormsModule
...
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; //<<<< import it here
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule //<<<< and here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Также это текущие стартовые комментарии для Angular4 ngModel
в FormsModule:
/**
* 'ngModel' forces an additional change detection run when its inputs change:
* E.g.:
* '''
* <div>{{myModel.valid}}</div>
* <input [(ngModel)]="myValue" #myModel="ngModel">
* '''
* I.e. 'ngModel' can export itself on the element and then be used in the template.
* Normally, this would result in expressions before the 'input' that use the exported directive
* to have and old value as they have been
* dirty checked before. As this is a very common case for 'ngModel', we added this second change
* detection run.
*
* Notes:
* - this is just one extra run no matter how many 'ngModel' have been changed.
* - this is a general problem when using 'exportAs' for directives!
*/
Если вы хотите использовать свой вход, а не в форме, вы можете использовать его с ngModelOptions
и сделать автономным true...
[ngModelOptions]="{standalone: true}"
Для получения дополнительной информации, посмотрите на ng_model в разделе "Угловой" здесь
В этом может помочь кто-то.
Предполагая, что вы создали новый NgModule, скажем AuthModule
, посвященный обработке ваших потребностей Auth, обязательно импортируйте FormsModule
в этот AuthModule тоже.
Если вы используете FormsModule
ТОЛЬКО в AuthModule
, тогда вам не нужно будет импортировать FormModule
IN по умолчанию AppModule
Итак, что-то вроде этого в AuthModule
:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';
@NgModule({
imports: [
authRouting,
FormsModule
],
declarations: [
SignupComponent,
LoginComponent
]
})
export class AuthModule { }
Затем забудьте об импорте в AppModule
, если вы не используете FormsModule
где-либо еще.
Вам необходимо импортировать FormsModule
Откройте приложение app.module.ts
и добавить строку
import { FormsModule } from '@angular/forms';
а также
@NgModule({
imports: [
FormsModule
],
})
Для устранения этой ошибки необходимо выполнить два шага
в основном app.module.ts должен выглядеть следующим образом:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import {AppChildComponent} from './appchild.component';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent, AppChildComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Надеюсь, что это поможет
import FormsModule в вашем модуле приложения.
это позволит вашему приложению работать хорошо.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,ContactListCopmponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Если вам нужно использовать [(ngModel)]
, сначала нужно импортировать FormsModule
в app.module.ts
, а затем добавить в список импорта. Что-то вроде этого:
app.module.ts
import {FormsModule} from "@angular/forms";
imports: [
BrowserModule,
FormsModule
],
app.component.ts
<input type="text" [(ngModel)]="name" >
<h1>your name is: {{name}} </h1>
Простая сущность: В app.module.ts
***Example 1***
import {FormsModule} from "@angular/forms";
// add in imports
imports: [
BrowserModule,
FormsModule
],
Пример 2:
Если вы хотите использовать [(ngModel)], вам необходимо импортировать FormsModule в app.module.ts
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [
AppComponent, videoComponent, tagDirective,
],
imports: [
BrowserModule, FormsModule
],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }
Я знаю, что этот вопрос касается Angular 2, но я нахожусь на Angular 4, и ни один из этих ответов не помог.
В Angular 4 синтаксис должен быть
[(ngModel)]
Надеюсь, что это поможет.
Я использую Angular 5.
В моем случае мне тоже нужно было импортировать RactiveFormsModule.
app.module.ts (или anymodule.module.ts)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
ReactiveFormsModule
требуется, когда вам нужны FormGroup, FormControl ,Validators
и т. Д. Для использования ngModel
вам не требуется ReactiveFormsModule
.
Если кто-то все еще получает ошибки после применения принятого решения, возможно, это связано с тем, что у вас есть отдельный файл модуля для компонента, в котором вы хотите использовать свойство ngModel во входном теге. В этом случае примените принятое решение в файле component module.ts.
если вы все еще получаете ошибку после правильного импорта FormsModule, проверьте свой терминал или (консоль Windows), потому что ваш проект не компилируется (из-за другой ошибки, которая может быть что угодно), и ваше решение не было отражено в вашем браузере!
В моем случае моя консоль имела следующую несвязанную ошибку: свойство 'retrieveGithubUser' не существует в типе 'ApiService'.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Для моего сценария мне пришлось импортировать оба модуля [CommonModule] и [FormsModule] в мой модуль
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MyComponent } from './mycomponent'
@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
MyComponent
]
})
export class MyModule { }
Иногда вы получаете эту ошибку при попытке использовать компонент из модуля, который не используется совместно, в другом модуле.
Например, у вас есть 2 модуля с module1.componentA.component.ts и module2.componentC.component.ts, и вы пытаетесь использовать селектор из module1.componentA.component.ts в шаблоне внутри модуля2 (например, <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">
), это вызовет ошибку, что someInputVariableInModule1 недоступен внутри module1.componentA.component.ts - даже если у вас есть @Input() someInputVariableInModule1
в module1.componentA.
Если это произойдет, вы хотите поделиться модулем1.componentA, чтобы быть доступным в других модулях.
Поэтому, если вы совместно используете module1.componentA внутри sharedModule, module1.componentA будет использоваться внутри других модулей (вне модуля 1), и каждый модуль, импортирующий sharedModule, сможет получить доступ к селектору в своих шаблонах, введя объявленный @Input()
переменная.
В модуле вы готовы использовать ngModel, вам нужно импортировать FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
],
})
export class AbcModule { }
Это для людей, которые используют простой JavaScript вместо Type Script. В дополнение к ссылке на файл script вверху страницы, как показано ниже
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
вы также должны сообщить загрузчику модуля загрузить ng.forms.FormsModule
. После внесения изменений мое свойство imports
метода NgModule
выглядело ниже
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
Счастливое кодирование!
ngModel исходит из FormsModule. Есть некоторые случаи, когда вы можете получить такую ошибку:
(В какой-то версии я столкнулся с этой проблемой). Вы правильно импортировали FormsModule, но проблема связана с входным тегом HTML. Вы должны добавить атрибут тега имени для ввода, а связанное с ним имя объекта в [(ngModel)] должно совпадать с именем в атрибуте name
Я обновил с RC1 до RC5 и получил эту ошибку.
Я завершил свою миграцию (вводя новый файл app.module.ts
, меняя package.json
, чтобы включить новые версии и отсутствующие модули, и, наконец, изменив мой main.ts
для загрузки соответственно на основе Angular2 пример быстрого запуска).
Я сделал npm update
, а затем npm outdated
, чтобы проверить, что установленные версии были правильными, но все же не повезло.
В итоге я полностью уничтожил папку node_modules
и переустановил с помощью npm install
- Voila! Проблема решена.
Когда я впервые сделал учебник, main.ts выглядел несколько иначе, чем сейчас. Он выглядит очень похожим, но обратите внимание на различия (верхний правильный).
Правильно:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Старый код учебника:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Я использую Angular 7
Я должен импортировать RactiveFormsModule, потому что я использую класс FormBuilder для создания реактивной формы.
import {
FormsModule,
ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
Для любой версии из Angular 2 вам необходимо импортировать FormsModule в файл app.module.ts, и он исправит проблему.