Не удается привязаться к "ngModel", так как это не является известным свойством "input"
у меня есть следующая ошибка при запуске моего углового приложения, даже если компонент не отображается.
Я должен прокомментировать, чтобы мое приложение работало.
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";
}
21 ответов
Да, это все, в приложении.модуль.ТС, я добавил :
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
использовать [(ngModel)]
на Угловое 2, 4 & 5+, вам нужно импортировать FormsModule из угловой формы...
также он находится в этом пути под формами в угловом РЕПО в github:
угловой / пакеты / формы / src / директивы / ng_model.ТС
наверное, это не очень приятно для разработчики AngularJs как ты мог использоватьng-model везде в любое время раньше, но как Angular пытается отделить модули, чтобы использовать все, что вы хотите использовать, ngModel находится в FormsModule сейчас.
также, если вы используете ReactiveFormsModule, необходимо импортировать его тоже.
так просто ищет app.модуль.ТС и 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
и сделать изолированную правда...
[ngModelOptions]="{standalone: true}"
для получения дополнительной информации, посмотрите на ng_model в угловую секцию здесь
бросать это может помочь кому-то.
предполагая, что вы создали новый NgModule, скажем AuthModule
посвященный обработке ваших потребностей Auth, убедитесь, что импортировать FormsModule
в этом AuthModule слишком.
если вы будете использовать FormsModule
только в AuthModule
тогда вам не нужно будет импортировать FormModule
по умолчанию 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 в вашем модуле приложения
- передайте его как значение импорта в @ ngmodule decorator
в основном приложении.модуль.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 { }
надеюсь, что это помогает
импорт 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
а затем добавить в список импорта. Что-то вроде этого:--8-->
app.модуль.ТС
- импорт
import {FormsModule} from "@angular/forms";
- добавить в импорт
imports: [ BrowserModule, FormsModule ],
app.деталь.ТС
- пример:
<input type="text" [(ngModel)]="name" >
- а то
<h1>your name is: {{name}} </h1>
Я знаю, что этот вопрос об угловом 2, но я на угловом 4, и ни один из этих ответов не помог.
в Angular 4 синтаксис должен быть
[(ngModel)]
надеюсь, что это помогает.
Простой Soultion : в приложение.модуль.ТС
***Example 1***
import {FormsModule} from "@angular/forms";
// add in imports
imports: [
BrowserModule,
FormsModule
],
Пример 2 :
Если вы хотите использовать [(ngModel)], то вам нужно импортировать FormsModule в приложении.модуль.ТС
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [
AppComponent, videoComponent, tagDirective,
],
imports: [
BrowserModule, FormsModule
],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }
Если кто-то все еще получает ошибки после применения принятого решения, это может быть связано с тем, что у вас есть отдельный файл модуля для компонента, в котором вы хотите использовать свойство ngModel во входном теге. В этом случае примените принятое решение в модуле компонента.файл TS, а также.
Я использую угловой 5.
в моем случае мне тоже нужно было импортировать RactiveFormsModule.
app.модуль.ts (или anymodule.модуль.ts)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
вам необходимо импортировать FormsModule
открыть app.модуль.ТС
и добавить строку
импорт { FormsModule } из '@angular / forms';
и @NgModule({ импортозамещающий: [ FormsModule ], })
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 {}
Если вы все еще получаете ошибку после импорта FormsModule правильно, то проверьте свой терминал или (консоль windows), потому что ваш проект не компилируется (из-за другой ошибки, которая может быть чем угодно), и ваше решение не было отражено в вашем браузере!
в моем случае моя консоль hay следующая несвязанная ошибка: свойство "retrieveGithubUser" не существует для типа "ApiService".
Это для людей, которые используют простой JavaScript вместо скрипта типа. В дополнение к ссылке на файл скрипта формы в верхней части страницы, как показано ниже
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
вы также должны сказать загрузчику модуля, чтобы загрузить ng.forms.FormsModule
. После внесения изменений my imports
собственность NgModule
метод выглядел как ниже
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
удачи в кодировании!
иногда вы получаете эту ошибку при попытке использовать компонент из модуля, который не является общим, в другом модуле.
например, у вас есть 2 модуля с модулем module1.componentA.деталь.ts и module2.componentC.деталь.ts и вы пытаетесь использовать селектор из module1.componentA.деталь.ts в шаблоне внутри module2 (например,<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">
), он выдаст ошибку, что someInputVariableInModule1 недоступен внутри module1.componentA.деталь.ТС - даже если у вас есть @Input() someInputVariableInModule1
в module1.componentA.
Если это произойдет, вы хотите поделиться module1.componentA будет доступна в других модулях.
Поэтому, если вы разделяете module1.componentA внутри sharedModule, module1.componentA будет использоваться внутри других модулей (снаружи от module1), и каждый модуль, импортирующий sharedModule, сможет получить доступ к селектору в своих шаблонах, вводя @Input()
объявлена переменная.
для моего сценария мне пришлось импортировать оба [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 { }
когда я впервые сделал учебник, 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);
я обновился с RC1 до RC5 и получил эту ошибку.
Я завершил миграцию (вводя новый , изменения package.json
включить новые версии и отсутствующие модули и, наконец, изменить my main.ts
для загрузки соответственно, на основе Angular2 быстрый пример запуска).
Я npm update
и npm outdated
чтобы подтвердить, что установленные версии были правильными, все равно не повезло.
Я закончил тем, что полностью вытер node_modules
папка и переустановка с помощью npm install
- вуаля! Проблема решена.
в модуле вы готовы использовать ngModel вы должны импортировать FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
],
})
export class AbcModule { }
для любой версии Angular 2 вам необходимо импортировать FormsModule в приложение.модуль.TS файл, и он исправит проблему.