angular 6 warning for using formControlName and ngModel

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.

asked Apr 19 '18 at 10:15

Akshay

1,63132049

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

8

We used ngModel for data and formControl for 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

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.

asked Apr 19 '18 at 10:15

Akshay

1,63132049

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

8

We used ngModel for data and formControl for 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

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.

asked Apr 19 '18 at 10:15

Akshay

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

asked Apr 19 '18 at 10:15

Akshay

1,63132049

asked Apr 19 '18 at 10:15

Akshay

1,63132049

asked Apr 19 '18 at 10:15

Akshay

1,63132049

asked Apr 19 '18 at 10:15

Akshay

1,63132049

asked Apr 19 '18 at 10:15

Akshay

1,63132049

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

8

We used ngModel for data and formControl for 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 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

8

We used ngModel for data and formControl for 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

Curiosity: Why do you want use [(ngModel)] and formControlName in the same input tag?

– Eliseo
Apr 19 '18 at 10:47

We used ngModel for data and formControl for validation.

– Akshay
Apr 19 '18 at 13:16

@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

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

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'});

]

edited Apr 19 '18 at 10:21

answered Apr 19 '18 at 10:20

yurzui

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 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

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 |

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 Makanjuola

193

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 |

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');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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'});

]

edited Apr 19 '18 at 10:21

answered Apr 19 '18 at 10:20

yurzui

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 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

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 |

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'});

]

edited Apr 19 '18 at 10:21

answered Apr 19 '18 at 10:20

yurzui

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 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

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 |

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'});

]

edited Apr 19 '18 at 10:21

answered Apr 19 '18 at 10:20

yurzui

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'});

]

edited Apr 19 '18 at 10:21

answered Apr 19 '18 at 10:20

yurzui

96.7k11191213

edited Apr 19 '18 at 10:21

answered Apr 19 '18 at 10:20

yurzui

96.7k11191213

answered Apr 19 '18 at 10:20

yurzui

96.7k11191213

answered Apr 19 '18 at 10:20

yurzui

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 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

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 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

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

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

For a brand new app in the making, which of the above 3 alternatives would you recommend ?

– Stephane
Oct 14 '18 at 16:41

@Stephane I would recommend using reactive forms

– yurzui
Oct 14 '18 at 17:54

add a comment |

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 Makanjuola

193

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 |

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 Makanjuola

193

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 |

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 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 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

answered Dec 27 '18 at 10:58

Olalekan J Makanjuola

193

answered Dec 27 '18 at 10:58

Olalekan J Makanjuola

193

answered Dec 27 '18 at 10:58

Olalekan J Makanjuola

193

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 |

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky