angular 6 warning for using formControlName and ngModel
19
I recently upgraded the angular version to 6-rc. I got following warning
It looks like you're using ngModel on the same form field as
formControlName. Support for using the ngModel input property and
ngModelChange event with reactive form directives has been deprecated
in Angular v6 and will be removed in Angular v7
For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel
What does it say exactly? the link does not have any fragment for #use-with-ngmodel
I guess I need to remove ngModel and use formGroup as my data binding object.
angular angular-ngmodel angular-reactive-forms
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
|
show 2 more comments
19
I recently upgraded the angular version to 6-rc. I got following warning
It looks like you're using ngModel on the same form field as
formControlName. Support for using the ngModel input property and
ngModelChange event with reactive form directives has been deprecated
in Angular v6 and will be removed in Angular v7
For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel
What does it say exactly? the link does not have any fragment for #use-with-ngmodel
I guess I need to remove ngModel and use formGroup as my data binding object.
angular angular-ngmodel angular-reactive-forms
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
You need to go to thenextdocs: next.angular.io/api/forms/FormControlName#use-with-ngmodel; while v6 is in release candidate the docs still refer to v5.
– jonrsharpe
Apr 19 '18 at 10:19
Curiosity: Why do you want use [(ngModel)] and formControlName in the same input tag?
– Eliseo
Apr 19 '18 at 10:47
8
We usedngModelfor data andformControlfor validation.
– Akshay
Apr 19 '18 at 13:16
4
@Akshay We did the same thing. It seems too big of a job to change the whole app to manually get/set values from reactive form controls.
– Umut Esen
May 11 '18 at 19:56
1
Aren't there any shortcut for getter/setter in Angular 6 reactive forms just like in C#.net like this "string _myProperty { get; set; }"? If you have a lot of inputs in one form wouldn't your code become too hard to read?
– Sherwin Ablaña Dapito
May 18 '18 at 3:04
|
show 2 more comments
19
19
19
5
I recently upgraded the angular version to 6-rc. I got following warning
It looks like you're using ngModel on the same form field as
formControlName. Support for using the ngModel input property and
ngModelChange event with reactive form directives has been deprecated
in Angular v6 and will be removed in Angular v7
For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel
What does it say exactly? the link does not have any fragment for #use-with-ngmodel
I guess I need to remove ngModel and use formGroup as my data binding object.
angular angular-ngmodel angular-reactive-forms
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
I recently upgraded the angular version to 6-rc. I got following warning
It looks like you're using ngModel on the same form field as
formControlName. Support for using the ngModel input property and
ngModelChange event with reactive form directives has been deprecated
in Angular v6 and will be removed in Angular v7
For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel
What does it say exactly? the link does not have any fragment for #use-with-ngmodel
I guess I need to remove ngModel and use formGroup as my data binding object.
angular angular-ngmodel angular-reactive-forms
angular angular-ngmodel angular-reactive-forms
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
asked Apr 19 '18 at 10:15
AkshayAkshay
1,63132049
1,63132049
You need to go to thenextdocs: next.angular.io/api/forms/FormControlName#use-with-ngmodel; while v6 is in release candidate the docs still refer to v5.
– jonrsharpe
Apr 19 '18 at 10:19
Curiosity: Why do you want use [(ngModel)] and formControlName in the same input tag?
– Eliseo
Apr 19 '18 at 10:47
8
We usedngModelfor data andformControlfor validation.
– Akshay
Apr 19 '18 at 13:16
4
@Akshay We did the same thing. It seems too big of a job to change the whole app to manually get/set values from reactive form controls.
– Umut Esen
May 11 '18 at 19:56
1
Aren't there any shortcut for getter/setter in Angular 6 reactive forms just like in C#.net like this "string _myProperty { get; set; }"? If you have a lot of inputs in one form wouldn't your code become too hard to read?
– Sherwin Ablaña Dapito
May 18 '18 at 3:04
|
show 2 more comments
You need to go to thenextdocs: next.angular.io/api/forms/FormControlName#use-with-ngmodel; while v6 is in release candidate the docs still refer to v5.
– jonrsharpe
Apr 19 '18 at 10:19
Curiosity: Why do you want use [(ngModel)] and formControlName in the same input tag?
– Eliseo
Apr 19 '18 at 10:47
8
We usedngModelfor data andformControlfor validation.
– Akshay
Apr 19 '18 at 13:16
4
@Akshay We did the same thing. It seems too big of a job to change the whole app to manually get/set values from reactive form controls.
– Umut Esen
May 11 '18 at 19:56
1
Aren't there any shortcut for getter/setter in Angular 6 reactive forms just like in C#.net like this "string _myProperty { get; set; }"? If you have a lot of inputs in one form wouldn't your code become too hard to read?
– Sherwin Ablaña Dapito
May 18 '18 at 3:04
You need to go to the
next docs: next.angular.io/api/forms/FormControlName#use-with-ngmodel; while v6 is in release candidate the docs still refer to v5.– jonrsharpe
Apr 19 '18 at 10:19
You need to go to the
next docs: next.angular.io/api/forms/FormControlName#use-with-ngmodel; while v6 is in release candidate the docs still refer to v5.– jonrsharpe
Apr 19 '18 at 10:19
Curiosity: Why do you want use [(ngModel)] and formControlName in the same input tag?
– Eliseo
Apr 19 '18 at 10:47
Curiosity: Why do you want use [(ngModel)] and formControlName in the same input tag?
– Eliseo
Apr 19 '18 at 10:47
8
8
We used
ngModel for data and formControl for validation.– Akshay
Apr 19 '18 at 13:16
We used
ngModel for data and formControl for validation.– Akshay
Apr 19 '18 at 13:16
4
4
@Akshay We did the same thing. It seems too big of a job to change the whole app to manually get/set values from reactive form controls.
– Umut Esen
May 11 '18 at 19:56
@Akshay We did the same thing. It seems too big of a job to change the whole app to manually get/set values from reactive form controls.
– Umut Esen
May 11 '18 at 19:56
1
1
Aren't there any shortcut for getter/setter in Angular 6 reactive forms just like in C#.net like this "string _myProperty { get; set; }"? If you have a lot of inputs in one form wouldn't your code become too hard to read?
– Sherwin Ablaña Dapito
May 18 '18 at 3:04
Aren't there any shortcut for getter/setter in Angular 6 reactive forms just like in C#.net like this "string _myProperty { get; set; }"? If you have a lot of inputs in one form wouldn't your code become too hard to read?
– Sherwin Ablaña Dapito
May 18 '18 at 3:04
|
show 2 more comments
2 Answers
2
active
oldest
votes
17
If you're looking for Angular 6 documentation right now then use https://next.angular.io
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
So you have 3 options:
use Reactive forms
use Template driven forms
silence warning (not recommended)
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
11
Oh my god. What's the point of changing syntax and things that work all the time? I spent like a day upgrading to Angular 6 to now find this. I noticed my onchange selection events weren't firing. It was because they changed the freaking syntax fromonChangetoselectionChange. Really useful.
– Luis Lavieri
Aug 7 '18 at 16:38
And there's more: for common inputs (text, textarea, select, checkbox, etc.), now, Angular does the disable(ing) mandatory through the Reactive Form config... nice... you can not use all-time-used disabled=true. And worst: if you make your own ui-components library... Angular might not have a clue of what is disabled... nice....
– Pedro Ferreira
Sep 8 '18 at 1:16
For a brand new app in the making, which of the above 3 alternatives would you recommend ?
– Stephane
Oct 14 '18 at 16:41
3
@Stephane I would recommend using reactive forms
– yurzui
Oct 14 '18 at 17:54
add a comment |
0
add
[ngModelOptions]="{standalone: true}"
You can read more from angular website https://angular.io/api/forms/NgModel
edited Dec 27 '18 at 11:15
Nick
27.2k111941
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
I think a lot of people are confused with the fact that Angular is deprecating support forngModelto work withformControlNamerather than completely deprecatingngModel.
– Nikhil
Jan 4 at 12:57
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
});
}
});
draft saved
draft discarded
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%2f49918503%2fangular-6-warning-for-using-formcontrolname-and-ngmodel%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
17
If you're looking for Angular 6 documentation right now then use https://next.angular.io
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
So you have 3 options:
use Reactive forms
use Template driven forms
silence warning (not recommended)
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
11
Oh my god. What's the point of changing syntax and things that work all the time? I spent like a day upgrading to Angular 6 to now find this. I noticed my onchange selection events weren't firing. It was because they changed the freaking syntax fromonChangetoselectionChange. Really useful.
– Luis Lavieri
Aug 7 '18 at 16:38
And there's more: for common inputs (text, textarea, select, checkbox, etc.), now, Angular does the disable(ing) mandatory through the Reactive Form config... nice... you can not use all-time-used disabled=true. And worst: if you make your own ui-components library... Angular might not have a clue of what is disabled... nice....
– Pedro Ferreira
Sep 8 '18 at 1:16
For a brand new app in the making, which of the above 3 alternatives would you recommend ?
– Stephane
Oct 14 '18 at 16:41
3
@Stephane I would recommend using reactive forms
– yurzui
Oct 14 '18 at 17:54
add a comment |
17
If you're looking for Angular 6 documentation right now then use https://next.angular.io
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
So you have 3 options:
use Reactive forms
use Template driven forms
silence warning (not recommended)
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
11
Oh my god. What's the point of changing syntax and things that work all the time? I spent like a day upgrading to Angular 6 to now find this. I noticed my onchange selection events weren't firing. It was because they changed the freaking syntax fromonChangetoselectionChange. Really useful.
– Luis Lavieri
Aug 7 '18 at 16:38
And there's more: for common inputs (text, textarea, select, checkbox, etc.), now, Angular does the disable(ing) mandatory through the Reactive Form config... nice... you can not use all-time-used disabled=true. And worst: if you make your own ui-components library... Angular might not have a clue of what is disabled... nice....
– Pedro Ferreira
Sep 8 '18 at 1:16
For a brand new app in the making, which of the above 3 alternatives would you recommend ?
– Stephane
Oct 14 '18 at 16:41
3
@Stephane I would recommend using reactive forms
– yurzui
Oct 14 '18 at 17:54
add a comment |
17
17
17
If you're looking for Angular 6 documentation right now then use https://next.angular.io
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
So you have 3 options:
use Reactive forms
use Template driven forms
silence warning (not recommended)
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
If you're looking for Angular 6 documentation right now then use https://next.angular.io
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
So you have 3 options:
use Reactive forms
use Template driven forms
silence warning (not recommended)
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
edited Apr 19 '18 at 10:21
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
answered Apr 19 '18 at 10:20
yurzuiyurzui
96.7k11191213
96.7k11191213
11
Oh my god. What's the point of changing syntax and things that work all the time? I spent like a day upgrading to Angular 6 to now find this. I noticed my onchange selection events weren't firing. It was because they changed the freaking syntax fromonChangetoselectionChange. Really useful.
– Luis Lavieri
Aug 7 '18 at 16:38
And there's more: for common inputs (text, textarea, select, checkbox, etc.), now, Angular does the disable(ing) mandatory through the Reactive Form config... nice... you can not use all-time-used disabled=true. And worst: if you make your own ui-components library... Angular might not have a clue of what is disabled... nice....
– Pedro Ferreira
Sep 8 '18 at 1:16
For a brand new app in the making, which of the above 3 alternatives would you recommend ?
– Stephane
Oct 14 '18 at 16:41
3
@Stephane I would recommend using reactive forms
– yurzui
Oct 14 '18 at 17:54
add a comment |
11
Oh my god. What's the point of changing syntax and things that work all the time? I spent like a day upgrading to Angular 6 to now find this. I noticed my onchange selection events weren't firing. It was because they changed the freaking syntax fromonChangetoselectionChange. Really useful.
– Luis Lavieri
Aug 7 '18 at 16:38
And there's more: for common inputs (text, textarea, select, checkbox, etc.), now, Angular does the disable(ing) mandatory through the Reactive Form config... nice... you can not use all-time-used disabled=true. And worst: if you make your own ui-components library... Angular might not have a clue of what is disabled... nice....
– Pedro Ferreira
Sep 8 '18 at 1:16
For a brand new app in the making, which of the above 3 alternatives would you recommend ?
– Stephane
Oct 14 '18 at 16:41
3
@Stephane I would recommend using reactive forms
– yurzui
Oct 14 '18 at 17:54
11
11
Oh my god. What's the point of changing syntax and things that work all the time? I spent like a day upgrading to Angular 6 to now find this. I noticed my onchange selection events weren't firing. It was because they changed the freaking syntax from
onChange to selectionChange. Really useful.– Luis Lavieri
Aug 7 '18 at 16:38
Oh my god. What's the point of changing syntax and things that work all the time? I spent like a day upgrading to Angular 6 to now find this. I noticed my onchange selection events weren't firing. It was because they changed the freaking syntax from
onChange to selectionChange. Really useful.– Luis Lavieri
Aug 7 '18 at 16:38
And there's more: for common inputs (text, textarea, select, checkbox, etc.), now, Angular does the disable(ing) mandatory through the Reactive Form config... nice... you can not use all-time-used disabled=true. And worst: if you make your own ui-components library... Angular might not have a clue of what is disabled... nice....
– Pedro Ferreira
Sep 8 '18 at 1:16
And there's more: for common inputs (text, textarea, select, checkbox, etc.), now, Angular does the disable(ing) mandatory through the Reactive Form config... nice... you can not use all-time-used disabled=true. And worst: if you make your own ui-components library... Angular might not have a clue of what is disabled... nice....
– Pedro Ferreira
Sep 8 '18 at 1:16
For a brand new app in the making, which of the above 3 alternatives would you recommend ?
– Stephane
Oct 14 '18 at 16:41
For a brand new app in the making, which of the above 3 alternatives would you recommend ?
– Stephane
Oct 14 '18 at 16:41
3
3
@Stephane I would recommend using reactive forms
– yurzui
Oct 14 '18 at 17:54
@Stephane I would recommend using reactive forms
– yurzui
Oct 14 '18 at 17:54
add a comment |
0
add
[ngModelOptions]="{standalone: true}"
You can read more from angular website https://angular.io/api/forms/NgModel
edited Dec 27 '18 at 11:15
Nick
27.2k111941
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
I think a lot of people are confused with the fact that Angular is deprecating support forngModelto work withformControlNamerather than completely deprecatingngModel.
– Nikhil
Jan 4 at 12:57
add a comment |
0
add
[ngModelOptions]="{standalone: true}"
You can read more from angular website https://angular.io/api/forms/NgModel
edited Dec 27 '18 at 11:15
Nick
27.2k111941
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
I think a lot of people are confused with the fact that Angular is deprecating support forngModelto work withformControlNamerather than completely deprecatingngModel.
– Nikhil
Jan 4 at 12:57
add a comment |
0
0
0
add
[ngModelOptions]="{standalone: true}"
You can read more from angular website https://angular.io/api/forms/NgModel
edited Dec 27 '18 at 11:15
Nick
27.2k111941
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
add
[ngModelOptions]="{standalone: true}"
You can read more from angular website https://angular.io/api/forms/NgModel
edited Dec 27 '18 at 11:15
Nick
27.2k111941
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
edited Dec 27 '18 at 11:15
Nick
27.2k111941
edited Dec 27 '18 at 11:15
Nick
27.2k111941
edited Dec 27 '18 at 11:15
Nick
27.2k111941
27.2k111941
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
answered Dec 27 '18 at 10:58
Olalekan J MakanjuolaOlalekan J Makanjuola
193
193
I think a lot of people are confused with the fact that Angular is deprecating support forngModelto work withformControlNamerather than completely deprecatingngModel.
– Nikhil
Jan 4 at 12:57
add a comment |
I think a lot of people are confused with the fact that Angular is deprecating support forngModelto work withformControlNamerather than completely deprecatingngModel.
– Nikhil
Jan 4 at 12:57
I think a lot of people are confused with the fact that Angular is deprecating support for
ngModel to work with formControlName rather than completely deprecating ngModel.– Nikhil
Jan 4 at 12:57
I think a lot of people are confused with the fact that Angular is deprecating support for
ngModel to work with formControlName rather than completely deprecating ngModel.– Nikhil
Jan 4 at 12:57
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f49918503%2fangular-6-warning-for-using-formcontrolname-and-ngmodel%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
You need to go to the
nextdocs: next.angular.io/api/forms/FormControlName#use-with-ngmodel; while v6 is in release candidate the docs still refer to v5.– jonrsharpe
Apr 19 '18 at 10:19
Curiosity: Why do you want use [(ngModel)] and formControlName in the same input tag?
– Eliseo
Apr 19 '18 at 10:47
8
We used
ngModelfor data andformControlfor validation.– Akshay
Apr 19 '18 at 13:16
4
@Akshay We did the same thing. It seems too big of a job to change the whole app to manually get/set values from reactive form controls.
– Umut Esen
May 11 '18 at 19:56
1
Aren't there any shortcut for getter/setter in Angular 6 reactive forms just like in C#.net like this "string _myProperty { get; set; }"? If you have a lot of inputs in one form wouldn't your code become too hard to read?
– Sherwin Ablaña Dapito
May 18 '18 at 3:04