Я получил следующую ошибку при запуске моего приложения Angular, даже если компонент не отображается.
Я должен закомментировать <input>
, чтобы мое приложение работало.
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it is't a known property of 'input'. ("
<div>
<label>Created:</label>
<input type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
</div>
</div>"): InterventionDetails@4:28 ; Зона: <root> ; Задача: Promise.then ; Значение:
Я'смотрю на Hero plunker, но я'не вижу никакой разницы с моим кодом.
Вот файл компонента:
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: Вмешательство;
public test : string = "toto";
}
Да, так и есть, в app.module.ts я просто добавил:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
Для использования [(ngModel)]
в Angular 2, 4 и 5+, вам нужно импортировать FormsModule из Angular form....
Также он находится по этому пути в разделе forms в Angular repo на github:
angular / packages / forms / src / directives / 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 в разделе Angular здесь
Бросая в этом может помочь кому-то.
Предполагая, что вы создали новый NgModule, сказать AuthModule
предназначенный для обработки авторизации должен обязательно импорта FormsModule в том, что AuthModule слишком.
Если вы'll быть с помощью FormsModule
только в AuthModule
тогда вы не'т нужно импортировать `FormModule в модуль по умолчанию ``
Так что что-то подобное в 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 { }
Тогда забудь об импорте в модуль
, если вы не'т использовать FormsModule где-либо еще.
простой Soultion : в приложение.модуль.ТС
Пример 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 { }
Существуют два шага, которые вы должны следовать, чтобы избавиться от этой ошибки
в основном приложении.модуль.ТС должна выглядеть, как показано ниже :
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 в вашей корень модуль если этот компонент в корень, т. е. приложение.модуль.ТС
Пожалуйста, откройте приложение.модуль.ТС
Импорт FormsModule от @угловое/формы
Экс:
import { FormsModule } from '@angular/forms';
и
@NgModule({
imports: [
FormsModule
],
})
импорт 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
в приложении.модуль.ТС
а затем добавить в список импорта. Что-то вроде этого:
приложение.модуль.ТС
{FormsModule} от "@угловое/формы и";
приложение.компонент.ТС
<тип входного=и"текст" и [(ngModel)]="имя" и >
<Н1 и GT;ваше имя: {{имя}} </Н1>
Я использую угловые 7
Мне нужно импортировать ReactiveFormsModule потому, что я использую класс FormBuilder для создания реактивной форме.
import {
FormsModule,
ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
], declarations: []})
Я'м, используя угловые 5.
В моем случае, мне нужно импортировать RactiveFormsModule.
приложение.модуль.ТС (или anymodule.модуль.ТС)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
Если кто-то по-прежнему получаете ошибки после нанесения принял решение, это может быть возможно, потому, что у вас есть отдельный файл модуля для компонента, в котором вы хотите использовать свойство ngModel в тег input. В этом случае, применить принято решение в компоненте's модуль.файл TS, а также.
если вы по-прежнему получаете сообщение об ошибке после того, как правильно импортировать FormsModule затем проверить в или на терминале (консоли Windows), потому что ваш проект не компиляции (из-за другой ошибки, что может быть что угодно) и ваше решение не было отражено в вашем браузере!
В моем случае, моя консоль имела следующие несвязанные ошибки: собственность 'retrieveGithubUser' не существует по типу 'к apiservice'.
В модуле вы готовы использовать ngModel вы должны импортировать FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
],
})
export class AbcModule { }
В ngModuleвам нужно импортировать
FormsModule, потому что
ngModelприходить из
FormsModule`.
Пожалуйста, измените ваш приложение.модуль.ТС, как в приведенном ниже коде я поделился
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
ngModel приходит от 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 {}
ngModel является частью FormsModule. И он должен быть импортирован от @угловое/формы для работы с ngModel.
Пожалуйста, измените приложение.модуль.ТС как следовать:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})