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







share|improve this question























  • 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
















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







share|improve this question























  • 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














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







share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Apr 19 '18 at 10:15









AkshayAkshay

1,63132049




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



















  • 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







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












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:




  1. use Reactive forms


  2. use Template driven forms



  3. silence warning (not recommended)



    imports: [
    
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
    
]







share|improve this answer





















  • 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



















0














add



[ngModelOptions]="{standalone: true}"


You can read more from angular website https://angular.io/api/forms/NgModel






share|improve this answer


























  • 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













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


















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:




  1. use Reactive forms


  2. use Template driven forms



  3. silence warning (not recommended)



    imports: [
    
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
    
]







share|improve this answer





















  • 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
















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:




  1. use Reactive forms


  2. use Template driven forms



  3. silence warning (not recommended)



    imports: [
    
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
    
]







share|improve this answer





















  • 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














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:




  1. use Reactive forms


  2. use Template driven forms



  3. silence warning (not recommended)



    imports: [
    
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
    
]







share|improve this answer















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:




  1. use Reactive forms


  2. use Template driven forms



  3. silence warning (not recommended)



    imports: [
    
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
    
]








share|improve this answer














share|improve this answer



share|improve this answer








edited Apr 19 '18 at 10:21

























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














  • 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








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













0














add



[ngModelOptions]="{standalone: true}"


You can read more from angular website https://angular.io/api/forms/NgModel






share|improve this answer


























  • 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


















0














add



[ngModelOptions]="{standalone: true}"


You can read more from angular website https://angular.io/api/forms/NgModel






share|improve this answer


























  • 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
















0












0








0







add



[ngModelOptions]="{standalone: true}"


You can read more from angular website https://angular.io/api/forms/NgModel






share|improve this answer















add



[ngModelOptions]="{standalone: true}"


You can read more from angular website https://angular.io/api/forms/NgModel







share|improve this answer














share|improve this answer



share|improve this answer








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




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





















  • 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







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




















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














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





















































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







-

Popular posts from this blog

Bressuire

Image
Subprefecture and commune in Nouvelle-Aquitaine, France Bressuire Subprefecture and commune Chateau de Bressuire and the Eglise Notre-Dame Coat of arms Location of Bressuire Bressuire Show map of France Bressuire Show map of Nouvelle-Aquitaine Coordinates: 46°50′27″N 0°29′14″W  /  46.8408°N 0.4872°W  / 46.8408; -0.4872 Coordinates: 46°50′27″N 0°29′14″W  /  46.8408°N 0.4872°W  / 46.8408; -0.4872 Country France Region Nouvelle-Aquitaine Department Deux-Sèvres Arrondissement Bressuire Canton Bressuire Government  • Mayor .mw-parser-output .nobold{font-weight:normal} (2014–20) Jean Michel Bernier Area 1 180.59 km 2 (69.73 sq mi) Population (2014) 2 19,300  • Density 110/km 2 (280/sq mi) Time zone UTC+01:00 (CET)  • Summer (DST) UTC+02:00 (CEST) INSEE/Postal code 79049 /79300 Elevation 98–236 m (322–774 ft) (avg. 173 m or 568 ft) 1 French Land Register data, which exclude...
Read more

Vorschmack

Image
Vorschmack Ukrainian Jewish-style vorschmack served on rye bread Course Hors d'oeuvre Region or state Eastern Europe Associated national cuisine Ashkenazi Jewish, Finnish, German, Ukrainian, Polish, Russian Main ingredients Ground meat and/or fish Cookbook: Vorschmack   Media: Vorschmack Vorschmack or forshmak (Yiddish: פֿאָרשמאַק ‎, from archaic German Vorschmack , "foretaste" [1] or "appetizer" [2] ) is an originally East European dish made of salty minced fish or meat. Different variants of this dish are especially common in Ashkenazi Jewish and Finnish cuisine. Some varieties are also known in Russian and Polish cuisine. Contents 1 In Jewish cuisine 2 In Russian cuisine 3 In Polish cuisine 4 In Finnish cuisine 5 See also 6 References In Jewish cuisine According to Gil Marks, the German name points to the possible Germanic origin of this dish. [1] William Pokhlyobkin descr...
Read more

Quarantine

Image
For other uses, see Quarantine (disambiguation). Signal flag "Lima" called the "Yellow Jack" which when flown in harbor means ship is under quarantine. A simple yellow flag (also called the "Yellow Jack") had historically been used to signal quarantine (it stands for Q among signal flags), but now indicates the opposite, as a signal of a ship free of disease that requests boarding and inspection. A quarantine is used to separate and restrict the movement of people; it is 'a restraint upon the activities or communication of persons or the transport of goods designed to prevent the spread of disease or pests', for a certain period of time. [1] This is often used in connection to disease and illness, such as those who may possibly have been exposed to a communicable disease. [2] The term is often erroneously used to mean medical isolation, which is "to separate ill persons who have a communicable disease from those who are healthy...
Read more