no provider for ngControl [FormControl] Angular 6
I am learning Angular. While the official tutorial has worked quite well for me, I am stuck with the 'hello world' of Reactive Forms. I am following https://angular.io/guide/reactive-forms. I have created a new component, in an other wise working project, to make an input text box using ReactiveForm. The template html is as follows:
<div>
<label>
Name:
<input type="text" [formControl]="name">
</label>
</div>
The component class looks as follows
import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';
@Component({
selector: 'app-party-worker',
templateUrl: './party-worker.component.html',
styleUrls: ['./party-worker.component.scss']
})
export class PartyWorkerComponent implements OnInit {
name = new FormControl('');
constructor() { }
ngOnInit() {
}
}
The error in the browser reads something like this.
Uncaught Error: Template parse errors:
No provider for NgControl ("
<label>
Name:
[ERROR ->]<input type="text" [formControl]="name">
</label>
</div>"): ng:///ViewsModule/PartyWorkerComponent.html@3:6
And yes, I have imported ReactiveFormsModule. My angular version, if it is revealed by ng --version is as follows
Angular CLI: 7.0.5
Node: 11.1.0
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
I fail to understand as to what is it that I am doing wrong. Any help is appreciated.
angular
asked Nov 21 at 5:58
Abhishek Prabhat
65
add a comment |
I am learning Angular. While the official tutorial has worked quite well for me, I am stuck with the 'hello world' of Reactive Forms. I am following https://angular.io/guide/reactive-forms. I have created a new component, in an other wise working project, to make an input text box using ReactiveForm. The template html is as follows:
<div>
<label>
Name:
<input type="text" [formControl]="name">
</label>
</div>
The component class looks as follows
import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';
@Component({
selector: 'app-party-worker',
templateUrl: './party-worker.component.html',
styleUrls: ['./party-worker.component.scss']
})
export class PartyWorkerComponent implements OnInit {
name = new FormControl('');
constructor() { }
ngOnInit() {
}
}
The error in the browser reads something like this.
Uncaught Error: Template parse errors:
No provider for NgControl ("
<label>
Name:
[ERROR ->]<input type="text" [formControl]="name">
</label>
</div>"): ng:///ViewsModule/PartyWorkerComponent.html@3:6
And yes, I have imported ReactiveFormsModule. My angular version, if it is revealed by ng --version is as follows
Angular CLI: 7.0.5
Node: 11.1.0
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
I fail to understand as to what is it that I am doing wrong. Any help is appreciated.
angular
asked Nov 21 at 5:58
Abhishek Prabhat
65
add a comment |
I am learning Angular. While the official tutorial has worked quite well for me, I am stuck with the 'hello world' of Reactive Forms. I am following https://angular.io/guide/reactive-forms. I have created a new component, in an other wise working project, to make an input text box using ReactiveForm. The template html is as follows:
<div>
<label>
Name:
<input type="text" [formControl]="name">
</label>
</div>
The component class looks as follows
import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';
@Component({
selector: 'app-party-worker',
templateUrl: './party-worker.component.html',
styleUrls: ['./party-worker.component.scss']
})
export class PartyWorkerComponent implements OnInit {
name = new FormControl('');
constructor() { }
ngOnInit() {
}
}
The error in the browser reads something like this.
Uncaught Error: Template parse errors:
No provider for NgControl ("
<label>
Name:
[ERROR ->]<input type="text" [formControl]="name">
</label>
</div>"): ng:///ViewsModule/PartyWorkerComponent.html@3:6
And yes, I have imported ReactiveFormsModule. My angular version, if it is revealed by ng --version is as follows
Angular CLI: 7.0.5
Node: 11.1.0
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
I fail to understand as to what is it that I am doing wrong. Any help is appreciated.
angular
asked Nov 21 at 5:58
Abhishek Prabhat
65
I am learning Angular. While the official tutorial has worked quite well for me, I am stuck with the 'hello world' of Reactive Forms. I am following https://angular.io/guide/reactive-forms. I have created a new component, in an other wise working project, to make an input text box using ReactiveForm. The template html is as follows:
<div>
<label>
Name:
<input type="text" [formControl]="name">
</label>
</div>
The component class looks as follows
import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';
@Component({
selector: 'app-party-worker',
templateUrl: './party-worker.component.html',
styleUrls: ['./party-worker.component.scss']
})
export class PartyWorkerComponent implements OnInit {
name = new FormControl('');
constructor() { }
ngOnInit() {
}
}
The error in the browser reads something like this.
Uncaught Error: Template parse errors:
No provider for NgControl ("
<label>
Name:
[ERROR ->]<input type="text" [formControl]="name">
</label>
</div>"): ng:///ViewsModule/PartyWorkerComponent.html@3:6
And yes, I have imported ReactiveFormsModule. My angular version, if it is revealed by ng --version is as follows
Angular CLI: 7.0.5
Node: 11.1.0
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
I fail to understand as to what is it that I am doing wrong. Any help is appreciated.
angular
angular
asked Nov 21 at 5:58
Abhishek Prabhat
65
asked Nov 21 at 5:58
Abhishek Prabhat
65
edited Nov 21 at 7:00
asked Nov 21 at 5:58
Abhishek Prabhat
65
asked Nov 21 at 5:58
Abhishek Prabhat
65
asked Nov 21 at 5:58
Abhishek Prabhat
65
65
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
To make this work you'll have to import the ReactiveFormsModule in your @NgModule which is the ViewsModule as your question suggests. As FormControl is exposed as a part of ReactiveFormsModule and NOT the FormsModule.
...
import { ReactiveFormsModule, ... } from '@angular/forms';
@NgModule({
imports: [..., ReactiveFormsModule, ...],
...
})
export class ViewsModule {...}
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio. Also played with their order. But to no avail.
– Abhishek Prabhat
Nov 21 at 7:03
Is thePartyWorkerComponenta part of yourapp.module?
– SiddAjmera
Nov 21 at 7:05
PartyWorkerComponentis a part ofViewsModule
– yurzui
Nov 21 at 7:12
1
Then theReactiveFormsModuleshould be added to theimportsarray ofViewsModule
– SiddAjmera
Nov 21 at 7:13
1
It can be seen from the errorng:///ViewsModule/PartyWorkerComponent.html@3:6
– yurzui
Nov 21 at 7:14
|
show 2 more comments
Sorry for troubling whosoever may have given it a thought. It turned out that there were two modules in my application and the AppModule was not where my component resided! The ReactiveFormsModule was missing in the module which mattered. Added the same and problem solved.
answered Nov 21 at 8:10
Abhishek Prabhat
65
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%2f53406049%2fno-provider-for-ngcontrol-formcontrol-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
To make this work you'll have to import the ReactiveFormsModule in your @NgModule which is the ViewsModule as your question suggests. As FormControl is exposed as a part of ReactiveFormsModule and NOT the FormsModule.
...
import { ReactiveFormsModule, ... } from '@angular/forms';
@NgModule({
imports: [..., ReactiveFormsModule, ...],
...
})
export class ViewsModule {...}
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio. Also played with their order. But to no avail.
– Abhishek Prabhat
Nov 21 at 7:03
Is thePartyWorkerComponenta part of yourapp.module?
– SiddAjmera
Nov 21 at 7:05
PartyWorkerComponentis a part ofViewsModule
– yurzui
Nov 21 at 7:12
1
Then theReactiveFormsModuleshould be added to theimportsarray ofViewsModule
– SiddAjmera
Nov 21 at 7:13
1
It can be seen from the errorng:///ViewsModule/PartyWorkerComponent.html@3:6
– yurzui
Nov 21 at 7:14
|
show 2 more comments
To make this work you'll have to import the ReactiveFormsModule in your @NgModule which is the ViewsModule as your question suggests. As FormControl is exposed as a part of ReactiveFormsModule and NOT the FormsModule.
...
import { ReactiveFormsModule, ... } from '@angular/forms';
@NgModule({
imports: [..., ReactiveFormsModule, ...],
...
})
export class ViewsModule {...}
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio. Also played with their order. But to no avail.
– Abhishek Prabhat
Nov 21 at 7:03
Is thePartyWorkerComponenta part of yourapp.module?
– SiddAjmera
Nov 21 at 7:05
PartyWorkerComponentis a part ofViewsModule
– yurzui
Nov 21 at 7:12
1
Then theReactiveFormsModuleshould be added to theimportsarray ofViewsModule
– SiddAjmera
Nov 21 at 7:13
1
It can be seen from the errorng:///ViewsModule/PartyWorkerComponent.html@3:6
– yurzui
Nov 21 at 7:14
|
show 2 more comments
To make this work you'll have to import the ReactiveFormsModule in your @NgModule which is the ViewsModule as your question suggests. As FormControl is exposed as a part of ReactiveFormsModule and NOT the FormsModule.
...
import { ReactiveFormsModule, ... } from '@angular/forms';
@NgModule({
imports: [..., ReactiveFormsModule, ...],
...
})
export class ViewsModule {...}
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
To make this work you'll have to import the ReactiveFormsModule in your @NgModule which is the ViewsModule as your question suggests. As FormControl is exposed as a part of ReactiveFormsModule and NOT the FormsModule.
...
import { ReactiveFormsModule, ... } from '@angular/forms';
@NgModule({
imports: [..., ReactiveFormsModule, ...],
...
})
export class ViewsModule {...}
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
edited Nov 21 at 7:15
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
answered Nov 21 at 6:03
SiddAjmera
12.9k31137
12.9k31137
At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio. Also played with their order. But to no avail.
– Abhishek Prabhat
Nov 21 at 7:03
Is thePartyWorkerComponenta part of yourapp.module?
– SiddAjmera
Nov 21 at 7:05
PartyWorkerComponentis a part ofViewsModule
– yurzui
Nov 21 at 7:12
1
Then theReactiveFormsModuleshould be added to theimportsarray ofViewsModule
– SiddAjmera
Nov 21 at 7:13
1
It can be seen from the errorng:///ViewsModule/PartyWorkerComponent.html@3:6
– yurzui
Nov 21 at 7:14
|
show 2 more comments
At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio. Also played with their order. But to no avail.
– Abhishek Prabhat
Nov 21 at 7:03
Is thePartyWorkerComponenta part of yourapp.module?
– SiddAjmera
Nov 21 at 7:05
PartyWorkerComponentis a part ofViewsModule
– yurzui
Nov 21 at 7:12
1
Then theReactiveFormsModuleshould be added to theimportsarray ofViewsModule
– SiddAjmera
Nov 21 at 7:13
1
It can be seen from the errorng:///ViewsModule/PartyWorkerComponent.html@3:6
– yurzui
Nov 21 at 7:14
At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio. Also played with their order. But to no avail.
– Abhishek Prabhat
Nov 21 at 7:03
At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio. Also played with their order. But to no avail.
– Abhishek Prabhat
Nov 21 at 7:03
Is the
PartyWorkerComponent a part of your app.module?– SiddAjmera
Nov 21 at 7:05
Is the
PartyWorkerComponent a part of your app.module?– SiddAjmera
Nov 21 at 7:05
PartyWorkerComponent is a part of ViewsModule– yurzui
Nov 21 at 7:12
PartyWorkerComponent is a part of ViewsModule– yurzui
Nov 21 at 7:12
1
1
Then the
ReactiveFormsModule should be added to the imports array of ViewsModule– SiddAjmera
Nov 21 at 7:13
Then the
ReactiveFormsModule should be added to the imports array of ViewsModule– SiddAjmera
Nov 21 at 7:13
1
1
It can be seen from the error
ng:///ViewsModule/PartyWorkerComponent.html@3:6– yurzui
Nov 21 at 7:14
It can be seen from the error
ng:///ViewsModule/PartyWorkerComponent.html@3:6– yurzui
Nov 21 at 7:14
|
show 2 more comments
Sorry for troubling whosoever may have given it a thought. It turned out that there were two modules in my application and the AppModule was not where my component resided! The ReactiveFormsModule was missing in the module which mattered. Added the same and problem solved.
answered Nov 21 at 8:10
Abhishek Prabhat
65
add a comment |
Sorry for troubling whosoever may have given it a thought. It turned out that there were two modules in my application and the AppModule was not where my component resided! The ReactiveFormsModule was missing in the module which mattered. Added the same and problem solved.
answered Nov 21 at 8:10
Abhishek Prabhat
65
add a comment |
Sorry for troubling whosoever may have given it a thought. It turned out that there were two modules in my application and the AppModule was not where my component resided! The ReactiveFormsModule was missing in the module which mattered. Added the same and problem solved.
answered Nov 21 at 8:10
Abhishek Prabhat
65
Sorry for troubling whosoever may have given it a thought. It turned out that there were two modules in my application and the AppModule was not where my component resided! The ReactiveFormsModule was missing in the module which mattered. Added the same and problem solved.
answered Nov 21 at 8:10
Abhishek Prabhat
65
answered Nov 21 at 8:10
Abhishek Prabhat
65
answered Nov 21 at 8:10
Abhishek Prabhat
65
answered Nov 21 at 8:10
Abhishek Prabhat
65
65
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53406049%2fno-provider-for-ngcontrol-formcontrol-angular-6%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
