CODEWITHSUNDEEP
formsangularmodule
Mathijs Segers
Mathijs Segers

Reputation: 6238

NgModule and FormModule importing on every module?

So I'm using RC5, and when embracing things seems to go pretty decently for now I ran into an issue which I'm not sure if I'm doing something wrong or is working as intended;

Before it was possible to make form directives etc. globally available. Nowadays we started using NgModule. It seems though that I can't use FormsModule and ReactiveFormsModule globally, either in AppModule nor in a SharedModule. I need to import it in every single module I create.

Is this as intended?

Upvotes: 10

Views: 8670

Answers (4)

jecorrales
jecorrales

Reputation: 270

You can export the class with the directives which you need, an example of this is:

  1. Create a file ngforms.module.ts (can be on the root app)
  2. Write this: 
import { NgModule }                         from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports:[
    FormsModule,
    ReactiveFormsModule,
  ],
  exports:[
    FormsModule,
    ReactiveFormsModule,
  ]
})
export class NgFormModule {}
  1. In every module or submodule for your app you have to import and call it
import { NgFormModule } from './ngform.module';
imports: [
    //Angular material
    BrowserAnimationsModule,
    //Angular (forms)
    NgFormModule
  ],

Upvotes: 1

Ankit Singh
Ankit Singh

Reputation: 24945

According to this NgModule doc it is as intended,

  • so if you are using multiple NgModule heirarchy in your app, you will need to create a SharedModule and import/export all the global Modules/Components/Directives/Pipes in it.

  • then import this module in every Module that you want to share it with.

You can read the docs for more clarification.

Upvotes: 7

Stefan Svrkota
Stefan Svrkota

Reputation: 50633

You should add FormsModule and ReactiveFormsModule to your SharedModule exports, then you need to import your SharedModule into your other modules. That way, you will be able to use desired directives globally.

Upvotes: 4

Xavi Cl
Xavi Cl

Reputation: 55

I'm using FormsModule and ReactiveFormsModule globally, in my app.module.ts like this:

 imports: [ // module dependencies
         BrowserModule, routing,
         FormsModule, ReactiveFormsModule, HttpModule,...
     ]

Upvotes: 0

Related Questions