NgModel not working. Shared component

Question

I need to share a component in several sites of my Jhipster application (4.8.2) and I have added my component in the file: shared-libs.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgJhipsterModule } from 'ng-jhipster';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { CookieModule } from 'ngx-cookie';

import { InfobipMailComponent} from '../infobip/infobip.mail.component'

@NgModule({
imports: [
    NgbModule.forRoot(),
    NgJhipsterModule.forRoot({
        // set below to true to make alerts look like toast
        alertAsToast: false,
        i18nEnabled: true,
        defaultI18nLang: 'en'
    }),
    InfiniteScrollModule,
    CookieModule.forRoot()
],
declarations: [
  InfobipMailComponent,
],
exports: [
    FormsModule,
    HttpModule,
    CommonModule,
    NgbModule,
    NgJhipsterModule,
    InfiniteScrollModule,
    InfobipMailComponent
]
})
export class Crm482SharedLibsModule {}

It seems that everything is going well, but the NgModel directive within that component has stopped working.

Can't bind to 'ngModel' since it isn't a known property of 'input'.

If it's value, I put it without directive {{value}} it reads it perfectly, the problem is when I use it within an "input" with the NgModel directive

Can someone help me solve the problem ?

Thank you.

Add FormsModule to imports array – yurzui Dec 25 '17 at 15:09 — yurzui, Dec 25 '17 at 15:09

score 2 · Answer 1 · answered Dec 25 '17 at 17:13

If you look at this angular documentation:

https://angular.io/guide/ngmodule-faq#!#q-browser-vs-common-module

you will read about NgModel this:

Import FormsModule from @angular/forms if your components have [(ngModel)] two-way binding expressions

read here how to: Import FormsModule, by adding to the import section of @NgModule your FormsModule

Here is a demo where you have your problem reproduced:

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("

https://stackblitz.com/edit/angular-hwl3mv?file=app%2Fapp.module.ts

and working demo when you add FormsModule to @NgModule imports:

https://stackblitz.com/edit/angular-tlgbhj?file=app/app.module.ts

NgModel not working. Shared component

1 Answers1