SharedModule exports ReactiveFormsModule and I import SharedModule in another module and it doesn't work

Multi tool use
I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.
This is my shared.module.ts :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }
And this is the module in which I want to export the SharedModule so that:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';
@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }
This is the code of MisDatos.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {
profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});
constructor() { }
ngOnInit() {
}
}
And this is the structure of my Angular Project.
Structure
Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????
Hope you help me, thanks so much. I am a begginner.
angular forms module components
|
show 2 more comments
I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.
This is my shared.module.ts :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }
And this is the module in which I want to export the SharedModule so that:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';
@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }
This is the code of MisDatos.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {
profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});
constructor() { }
ngOnInit() {
}
}
And this is the structure of my Angular Project.
Structure
Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????
Hope you help me, thanks so much. I am a begginner.
angular forms module components
so where do you declare MisDatos component?
– Fateme Fazli
Dec 30 '18 at 12:22
I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';
– qbvp
Dec 30 '18 at 12:30
you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:32
It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }
– qbvp
Dec 30 '18 at 12:37
declarations: [MisDatosComponent ]
and remove the MisDatosComponent from ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:38
|
show 2 more comments
I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.
This is my shared.module.ts :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }
And this is the module in which I want to export the SharedModule so that:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';
@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }
This is the code of MisDatos.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {
profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});
constructor() { }
ngOnInit() {
}
}
And this is the structure of my Angular Project.
Structure
Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????
Hope you help me, thanks so much. I am a begginner.
angular forms module components
I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.
This is my shared.module.ts :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }
And this is the module in which I want to export the SharedModule so that:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';
@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }
This is the code of MisDatos.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {
profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});
constructor() { }
ngOnInit() {
}
}
And this is the structure of my Angular Project.
Structure
Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????
Hope you help me, thanks so much. I am a begginner.
angular forms module components
angular forms module components
asked Dec 30 '18 at 12:15
qbvpqbvp
62
62
so where do you declare MisDatos component?
– Fateme Fazli
Dec 30 '18 at 12:22
I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';
– qbvp
Dec 30 '18 at 12:30
you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:32
It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }
– qbvp
Dec 30 '18 at 12:37
declarations: [MisDatosComponent ]
and remove the MisDatosComponent from ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:38
|
show 2 more comments
so where do you declare MisDatos component?
– Fateme Fazli
Dec 30 '18 at 12:22
I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';
– qbvp
Dec 30 '18 at 12:30
you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:32
It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }
– qbvp
Dec 30 '18 at 12:37
declarations: [MisDatosComponent ]
and remove the MisDatosComponent from ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:38
so where do you declare MisDatos component?
– Fateme Fazli
Dec 30 '18 at 12:22
so where do you declare MisDatos component?
– Fateme Fazli
Dec 30 '18 at 12:22
I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';
– qbvp
Dec 30 '18 at 12:30
I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';
– qbvp
Dec 30 '18 at 12:30
you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:32
you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:32
It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }
– qbvp
Dec 30 '18 at 12:37
It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }
– qbvp
Dec 30 '18 at 12:37
declarations: [MisDatosComponent ]
and remove the MisDatosComponent from ProfesionalModule.– Fateme Fazli
Dec 30 '18 at 12:38
declarations: [MisDatosComponent ]
and remove the MisDatosComponent from ProfesionalModule.– Fateme Fazli
Dec 30 '18 at 12:38
|
show 2 more comments
1 Answer
1
active
oldest
votes
SharedModule
should also import FormsModule
. You can't export something that hasn't been imported or declared in an Angular module.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977495%2fsharedmodule-exports-reactiveformsmodule-and-i-import-sharedmodule-in-another-mo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
SharedModule
should also import FormsModule
. You can't export something that hasn't been imported or declared in an Angular module.
add a comment |
SharedModule
should also import FormsModule
. You can't export something that hasn't been imported or declared in an Angular module.
add a comment |
SharedModule
should also import FormsModule
. You can't export something that hasn't been imported or declared in an Angular module.
SharedModule
should also import FormsModule
. You can't export something that hasn't been imported or declared in an Angular module.
answered Dec 30 '18 at 14:22
David WalschotsDavid Walschots
8,10352647
8,10352647
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977495%2fsharedmodule-exports-reactiveformsmodule-and-i-import-sharedmodule-in-another-mo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
0MTitlX5KoPNDzKT pCCx AK75AofL6yjWPsbUzxCEMX,FC
so where do you declare MisDatos component?
– Fateme Fazli
Dec 30 '18 at 12:22
I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';
– qbvp
Dec 30 '18 at 12:30
you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.
– Fateme Fazli
Dec 30 '18 at 12:32
It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }
– qbvp
Dec 30 '18 at 12:37
declarations: [MisDatosComponent ]
and remove the MisDatosComponent from ProfesionalModule.– Fateme Fazli
Dec 30 '18 at 12:38