Не может привязаться к 'нгМодели',так как это не является известным свойством 'входа'.

javascript angular typescript input


При запуске приложения Angular,даже если компонент не отображается,я получил следующую ошибку.

Я должен закомментировать <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";
}



Answer 1 Anthony Brenelière


Да,именно так,в app.module.ts я только что добавил :

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})



Answer 2 Gabriele Ciech


Чтобы иметь возможность использовать двустороннюю привязку данных для ввода формы, вам необходимо импортировать пакет FormsModule в ваш модуль Angular . Для получения дополнительной информации смотрите официальный учебник Angular 2 здесь и официальную документацию для форм




Answer 3 Alireza


Для использования [(ngModel)] в Angular 2 , 4 и 5+ необходимо импортировать FormsModule из формы Angular ...

Также в этом пути под формами в Angular Repo в GitHub :

угловые / пакеты / формы / src / директивы / ng_model.ts

Вероятно , это не очень приятно для разработчиков AngularJs , как вы могли бы использовать нг-модель везде в любое время до, но , как 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 здесь




Answer 4 PRao


Вам необходимо импортировать Форм-модуль

Откройте app.module.ts

и добавить строку

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

and

@NgModule({
imports: [
   FormsModule
],
})



Answer 5 KhoPhi


Вбросить это может кому-нибудь помочь.

Предполагая , что вы создали новый 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 .