angular 6 deprecation of using formControlName and ngModel together
I have angular 6 project. And I was using ngModel and formControlName together. But angular gave me warning in below. Forexamle when I open update popup from button in grid, I can easily bind inputs in update popup automatically. But angular 7 says that remove ngModel. So, I must always map everything to my student object. What is the best way for this? Can we give formValueType to form value like studentObject in below code and then can it bind automatically?
Angular 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.
myHtml
<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
<p-dialog>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Name Surname</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.nameSurname" formControlName="nameSurname" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Email</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.email" formControlName="email" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Age</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.age" formControlName="age" />
</div>
</div>
</div>
<button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
</p-dialog>
</form>
angular typescript angular6 angular-ngmodel
add a comment |
I have angular 6 project. And I was using ngModel and formControlName together. But angular gave me warning in below. Forexamle when I open update popup from button in grid, I can easily bind inputs in update popup automatically. But angular 7 says that remove ngModel. So, I must always map everything to my student object. What is the best way for this? Can we give formValueType to form value like studentObject in below code and then can it bind automatically?
Angular 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.
myHtml
<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
<p-dialog>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Name Surname</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.nameSurname" formControlName="nameSurname" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Email</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.email" formControlName="email" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Age</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.age" formControlName="age" />
</div>
</div>
</div>
<button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
</p-dialog>
</form>
angular typescript angular6 angular-ngmodel
add a comment |
I have angular 6 project. And I was using ngModel and formControlName together. But angular gave me warning in below. Forexamle when I open update popup from button in grid, I can easily bind inputs in update popup automatically. But angular 7 says that remove ngModel. So, I must always map everything to my student object. What is the best way for this? Can we give formValueType to form value like studentObject in below code and then can it bind automatically?
Angular 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.
myHtml
<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
<p-dialog>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Name Surname</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.nameSurname" formControlName="nameSurname" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Email</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.email" formControlName="email" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Age</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.age" formControlName="age" />
</div>
</div>
</div>
<button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
</p-dialog>
</form>
angular typescript angular6 angular-ngmodel
I have angular 6 project. And I was using ngModel and formControlName together. But angular gave me warning in below. Forexamle when I open update popup from button in grid, I can easily bind inputs in update popup automatically. But angular 7 says that remove ngModel. So, I must always map everything to my student object. What is the best way for this? Can we give formValueType to form value like studentObject in below code and then can it bind automatically?
Angular 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.
myHtml
<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
<p-dialog>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Name Surname</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.nameSurname" formControlName="nameSurname" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Email</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.email" formControlName="email" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Age</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.age" formControlName="age" />
</div>
</div>
</div>
<button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
</p-dialog>
</form>
angular typescript angular6 angular-ngmodel
angular typescript angular6 angular-ngmodel
edited Nov 19 '18 at 16:36
Goncalo Peres
1,4591519
1,4591519
asked Oct 4 '18 at 7:44
Hasan OzdemirHasan Ozdemir
35013
35013
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
You just choose either ngModel with mean you are using template driven form or formControlName with mean you are using reactive form.
https://angular.io/guide/reactive-forms
If you want a simple form just remove formControlName in every input.
If you want to do more in form you can use reactive form by remove ngModel and add
name attribute like name=nameSurname
Thanks for your reply. Using template driven form is very easy and everything be automatically. But, in that i can't validation. Using reactive form is very difficult and wirting more and more code.But, I understand from the replies, in future template driven won't be used. And technology will continue with reactive forms. Is it true? Because i 'm starting new project and i must choose one of them. @K.tin
– Hasan Ozdemir
Oct 4 '18 at 8:37
2
@HasanOzdemir Of course you can have validation on a template driven form: angular.io/guide/form-validation But I'd go for a reactive form though :)
– AJT_82
Oct 4 '18 at 8:40
If I start with reactive form to project, then i mustn't use template driven anywhere in project. In other words, some pages reactive some pages template driven (hybrid) is not good. Is it true? @AJT_82
– Hasan Ozdemir
Oct 4 '18 at 8:47
1
@HasanOzdemir Yes, you cannot (in future) mix template driven and reactive form in the same. I'm so happy that this deprecation warning exists now, since people have been "misusing" this way too much ;) But you can use either reactive form or template driven form, just don't use them in same form :)
– AJT_82
Oct 4 '18 at 8:49
Thanks for your reply @AJT_82. My last question is: I decided that all forms in my project will be reactive form. And reporting and dataGrid page will be template driven in my project. I think, this is the best way. Am i right?
– Hasan Ozdemir
Oct 4 '18 at 8:57
|
show 3 more comments
There is no need to use both (ngModel and formControlName)
While Update you can use reactive form using
patchValue(value: {...}, options: {...}): void
https://angular.io/api/forms/FormGroup
For your case you will need something like
this.studentForm.patchValue({
nameSurname : 'Some Name',
email : 'example@email.com,
age : '24'
})
This will pre-fill the value to the form and you can easily use same form for update
Thanks for your reply. But in this example, there are only three input at the page. But in real scenario, there are more than 50 input. And mapping all these properties is very big work for all page. But when i'm using ngModel it bind automatically. How can i bind automatically? @KrutiChoksiPatel
– Hasan Ozdemir
Oct 4 '18 at 8:32
{ nameSurname : 'Some Name', email : 'example@email.com, age : '24' } Yes this object can be obtained by for loop of keys
– Kruti Choksi Patel
Oct 4 '18 at 10:57
add a comment |
Having ngModel
with formGroup
is really odd. You should remove ngModel
and instead bind on valueChanges
on fromGroup and then just iterate through received data and assign values.
//somewhere where form is build
this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));
private onStudentFormValueChange(data) {
this.selectedStudent.age = data.age
this.selectedStudent.email = data.email
this.selectedStudent.nameSurname = data.nameSurname
// or
for (const key in this.studentForm.controls) {
const control = this.studentForm.get(key);
this.selectedStudent[key] = control.value
}
}
How to deal with initial values this way ? assign initial values ? I think this will not auto bind the initial values forinput
,select
, ...
– HDJEMAI
Oct 4 '18 at 8:38
I will start a big project with reactive form. But is this usage have any problem which @HDJEMAI says. Or any other problem?
– Hasan Ozdemir
Oct 4 '18 at 8:50
You mean initialy bind values toselectedStudent
orstudentForm
?
– Patryk Brejdak
Oct 4 '18 at 9:00
Bind to studentForm @PatrykBrejdak
– Hasan Ozdemir
Oct 4 '18 at 9:02
No, it won't assign intial values tostudentForm
since it's just copying values forselectedStudent
fromstudentForm
controls. My bad, I misunderstood your question, it actually depends how your form is build. @HasanOzdemir could you show how you build your form? Are you rebuilding form whenever you switchselectedStudent
?
– Patryk Brejdak
Oct 4 '18 at 9:04
|
show 3 more comments
The best way is to use ReactiveForms with formGroup and formControlName. If you want to make it automatic, maybe you can parse your object and for each element you create a new parameter using the element key. Then you can patch the formGroup with your object.
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%2f52641557%2fangular-6-deprecation-of-using-formcontrolname-and-ngmodel-together%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
You just choose either ngModel with mean you are using template driven form or formControlName with mean you are using reactive form.
https://angular.io/guide/reactive-forms
If you want a simple form just remove formControlName in every input.
If you want to do more in form you can use reactive form by remove ngModel and add
name attribute like name=nameSurname
Thanks for your reply. Using template driven form is very easy and everything be automatically. But, in that i can't validation. Using reactive form is very difficult and wirting more and more code.But, I understand from the replies, in future template driven won't be used. And technology will continue with reactive forms. Is it true? Because i 'm starting new project and i must choose one of them. @K.tin
– Hasan Ozdemir
Oct 4 '18 at 8:37
2
@HasanOzdemir Of course you can have validation on a template driven form: angular.io/guide/form-validation But I'd go for a reactive form though :)
– AJT_82
Oct 4 '18 at 8:40
If I start with reactive form to project, then i mustn't use template driven anywhere in project. In other words, some pages reactive some pages template driven (hybrid) is not good. Is it true? @AJT_82
– Hasan Ozdemir
Oct 4 '18 at 8:47
1
@HasanOzdemir Yes, you cannot (in future) mix template driven and reactive form in the same. I'm so happy that this deprecation warning exists now, since people have been "misusing" this way too much ;) But you can use either reactive form or template driven form, just don't use them in same form :)
– AJT_82
Oct 4 '18 at 8:49
Thanks for your reply @AJT_82. My last question is: I decided that all forms in my project will be reactive form. And reporting and dataGrid page will be template driven in my project. I think, this is the best way. Am i right?
– Hasan Ozdemir
Oct 4 '18 at 8:57
|
show 3 more comments
You just choose either ngModel with mean you are using template driven form or formControlName with mean you are using reactive form.
https://angular.io/guide/reactive-forms
If you want a simple form just remove formControlName in every input.
If you want to do more in form you can use reactive form by remove ngModel and add
name attribute like name=nameSurname
Thanks for your reply. Using template driven form is very easy and everything be automatically. But, in that i can't validation. Using reactive form is very difficult and wirting more and more code.But, I understand from the replies, in future template driven won't be used. And technology will continue with reactive forms. Is it true? Because i 'm starting new project and i must choose one of them. @K.tin
– Hasan Ozdemir
Oct 4 '18 at 8:37
2
@HasanOzdemir Of course you can have validation on a template driven form: angular.io/guide/form-validation But I'd go for a reactive form though :)
– AJT_82
Oct 4 '18 at 8:40
If I start with reactive form to project, then i mustn't use template driven anywhere in project. In other words, some pages reactive some pages template driven (hybrid) is not good. Is it true? @AJT_82
– Hasan Ozdemir
Oct 4 '18 at 8:47
1
@HasanOzdemir Yes, you cannot (in future) mix template driven and reactive form in the same. I'm so happy that this deprecation warning exists now, since people have been "misusing" this way too much ;) But you can use either reactive form or template driven form, just don't use them in same form :)
– AJT_82
Oct 4 '18 at 8:49
Thanks for your reply @AJT_82. My last question is: I decided that all forms in my project will be reactive form. And reporting and dataGrid page will be template driven in my project. I think, this is the best way. Am i right?
– Hasan Ozdemir
Oct 4 '18 at 8:57
|
show 3 more comments
You just choose either ngModel with mean you are using template driven form or formControlName with mean you are using reactive form.
https://angular.io/guide/reactive-forms
If you want a simple form just remove formControlName in every input.
If you want to do more in form you can use reactive form by remove ngModel and add
name attribute like name=nameSurname
You just choose either ngModel with mean you are using template driven form or formControlName with mean you are using reactive form.
https://angular.io/guide/reactive-forms
If you want a simple form just remove formControlName in every input.
If you want to do more in form you can use reactive form by remove ngModel and add
name attribute like name=nameSurname
answered Oct 4 '18 at 8:26
K.tinK.tin
343
343
Thanks for your reply. Using template driven form is very easy and everything be automatically. But, in that i can't validation. Using reactive form is very difficult and wirting more and more code.But, I understand from the replies, in future template driven won't be used. And technology will continue with reactive forms. Is it true? Because i 'm starting new project and i must choose one of them. @K.tin
– Hasan Ozdemir
Oct 4 '18 at 8:37
2
@HasanOzdemir Of course you can have validation on a template driven form: angular.io/guide/form-validation But I'd go for a reactive form though :)
– AJT_82
Oct 4 '18 at 8:40
If I start with reactive form to project, then i mustn't use template driven anywhere in project. In other words, some pages reactive some pages template driven (hybrid) is not good. Is it true? @AJT_82
– Hasan Ozdemir
Oct 4 '18 at 8:47
1
@HasanOzdemir Yes, you cannot (in future) mix template driven and reactive form in the same. I'm so happy that this deprecation warning exists now, since people have been "misusing" this way too much ;) But you can use either reactive form or template driven form, just don't use them in same form :)
– AJT_82
Oct 4 '18 at 8:49
Thanks for your reply @AJT_82. My last question is: I decided that all forms in my project will be reactive form. And reporting and dataGrid page will be template driven in my project. I think, this is the best way. Am i right?
– Hasan Ozdemir
Oct 4 '18 at 8:57
|
show 3 more comments
Thanks for your reply. Using template driven form is very easy and everything be automatically. But, in that i can't validation. Using reactive form is very difficult and wirting more and more code.But, I understand from the replies, in future template driven won't be used. And technology will continue with reactive forms. Is it true? Because i 'm starting new project and i must choose one of them. @K.tin
– Hasan Ozdemir
Oct 4 '18 at 8:37
2
@HasanOzdemir Of course you can have validation on a template driven form: angular.io/guide/form-validation But I'd go for a reactive form though :)
– AJT_82
Oct 4 '18 at 8:40
If I start with reactive form to project, then i mustn't use template driven anywhere in project. In other words, some pages reactive some pages template driven (hybrid) is not good. Is it true? @AJT_82
– Hasan Ozdemir
Oct 4 '18 at 8:47
1
@HasanOzdemir Yes, you cannot (in future) mix template driven and reactive form in the same. I'm so happy that this deprecation warning exists now, since people have been "misusing" this way too much ;) But you can use either reactive form or template driven form, just don't use them in same form :)
– AJT_82
Oct 4 '18 at 8:49
Thanks for your reply @AJT_82. My last question is: I decided that all forms in my project will be reactive form. And reporting and dataGrid page will be template driven in my project. I think, this is the best way. Am i right?
– Hasan Ozdemir
Oct 4 '18 at 8:57
Thanks for your reply. Using template driven form is very easy and everything be automatically. But, in that i can't validation. Using reactive form is very difficult and wirting more and more code.But, I understand from the replies, in future template driven won't be used. And technology will continue with reactive forms. Is it true? Because i 'm starting new project and i must choose one of them. @K.tin
– Hasan Ozdemir
Oct 4 '18 at 8:37
Thanks for your reply. Using template driven form is very easy and everything be automatically. But, in that i can't validation. Using reactive form is very difficult and wirting more and more code.But, I understand from the replies, in future template driven won't be used. And technology will continue with reactive forms. Is it true? Because i 'm starting new project and i must choose one of them. @K.tin
– Hasan Ozdemir
Oct 4 '18 at 8:37
2
2
@HasanOzdemir Of course you can have validation on a template driven form: angular.io/guide/form-validation But I'd go for a reactive form though :)
– AJT_82
Oct 4 '18 at 8:40
@HasanOzdemir Of course you can have validation on a template driven form: angular.io/guide/form-validation But I'd go for a reactive form though :)
– AJT_82
Oct 4 '18 at 8:40
If I start with reactive form to project, then i mustn't use template driven anywhere in project. In other words, some pages reactive some pages template driven (hybrid) is not good. Is it true? @AJT_82
– Hasan Ozdemir
Oct 4 '18 at 8:47
If I start with reactive form to project, then i mustn't use template driven anywhere in project. In other words, some pages reactive some pages template driven (hybrid) is not good. Is it true? @AJT_82
– Hasan Ozdemir
Oct 4 '18 at 8:47
1
1
@HasanOzdemir Yes, you cannot (in future) mix template driven and reactive form in the same. I'm so happy that this deprecation warning exists now, since people have been "misusing" this way too much ;) But you can use either reactive form or template driven form, just don't use them in same form :)
– AJT_82
Oct 4 '18 at 8:49
@HasanOzdemir Yes, you cannot (in future) mix template driven and reactive form in the same. I'm so happy that this deprecation warning exists now, since people have been "misusing" this way too much ;) But you can use either reactive form or template driven form, just don't use them in same form :)
– AJT_82
Oct 4 '18 at 8:49
Thanks for your reply @AJT_82. My last question is: I decided that all forms in my project will be reactive form. And reporting and dataGrid page will be template driven in my project. I think, this is the best way. Am i right?
– Hasan Ozdemir
Oct 4 '18 at 8:57
Thanks for your reply @AJT_82. My last question is: I decided that all forms in my project will be reactive form. And reporting and dataGrid page will be template driven in my project. I think, this is the best way. Am i right?
– Hasan Ozdemir
Oct 4 '18 at 8:57
|
show 3 more comments
There is no need to use both (ngModel and formControlName)
While Update you can use reactive form using
patchValue(value: {...}, options: {...}): void
https://angular.io/api/forms/FormGroup
For your case you will need something like
this.studentForm.patchValue({
nameSurname : 'Some Name',
email : 'example@email.com,
age : '24'
})
This will pre-fill the value to the form and you can easily use same form for update
Thanks for your reply. But in this example, there are only three input at the page. But in real scenario, there are more than 50 input. And mapping all these properties is very big work for all page. But when i'm using ngModel it bind automatically. How can i bind automatically? @KrutiChoksiPatel
– Hasan Ozdemir
Oct 4 '18 at 8:32
{ nameSurname : 'Some Name', email : 'example@email.com, age : '24' } Yes this object can be obtained by for loop of keys
– Kruti Choksi Patel
Oct 4 '18 at 10:57
add a comment |
There is no need to use both (ngModel and formControlName)
While Update you can use reactive form using
patchValue(value: {...}, options: {...}): void
https://angular.io/api/forms/FormGroup
For your case you will need something like
this.studentForm.patchValue({
nameSurname : 'Some Name',
email : 'example@email.com,
age : '24'
})
This will pre-fill the value to the form and you can easily use same form for update
Thanks for your reply. But in this example, there are only three input at the page. But in real scenario, there are more than 50 input. And mapping all these properties is very big work for all page. But when i'm using ngModel it bind automatically. How can i bind automatically? @KrutiChoksiPatel
– Hasan Ozdemir
Oct 4 '18 at 8:32
{ nameSurname : 'Some Name', email : 'example@email.com, age : '24' } Yes this object can be obtained by for loop of keys
– Kruti Choksi Patel
Oct 4 '18 at 10:57
add a comment |
There is no need to use both (ngModel and formControlName)
While Update you can use reactive form using
patchValue(value: {...}, options: {...}): void
https://angular.io/api/forms/FormGroup
For your case you will need something like
this.studentForm.patchValue({
nameSurname : 'Some Name',
email : 'example@email.com,
age : '24'
})
This will pre-fill the value to the form and you can easily use same form for update
There is no need to use both (ngModel and formControlName)
While Update you can use reactive form using
patchValue(value: {...}, options: {...}): void
https://angular.io/api/forms/FormGroup
For your case you will need something like
this.studentForm.patchValue({
nameSurname : 'Some Name',
email : 'example@email.com,
age : '24'
})
This will pre-fill the value to the form and you can easily use same form for update
answered Oct 4 '18 at 8:27
Kruti Choksi PatelKruti Choksi Patel
463
463
Thanks for your reply. But in this example, there are only three input at the page. But in real scenario, there are more than 50 input. And mapping all these properties is very big work for all page. But when i'm using ngModel it bind automatically. How can i bind automatically? @KrutiChoksiPatel
– Hasan Ozdemir
Oct 4 '18 at 8:32
{ nameSurname : 'Some Name', email : 'example@email.com, age : '24' } Yes this object can be obtained by for loop of keys
– Kruti Choksi Patel
Oct 4 '18 at 10:57
add a comment |
Thanks for your reply. But in this example, there are only three input at the page. But in real scenario, there are more than 50 input. And mapping all these properties is very big work for all page. But when i'm using ngModel it bind automatically. How can i bind automatically? @KrutiChoksiPatel
– Hasan Ozdemir
Oct 4 '18 at 8:32
{ nameSurname : 'Some Name', email : 'example@email.com, age : '24' } Yes this object can be obtained by for loop of keys
– Kruti Choksi Patel
Oct 4 '18 at 10:57
Thanks for your reply. But in this example, there are only three input at the page. But in real scenario, there are more than 50 input. And mapping all these properties is very big work for all page. But when i'm using ngModel it bind automatically. How can i bind automatically? @KrutiChoksiPatel
– Hasan Ozdemir
Oct 4 '18 at 8:32
Thanks for your reply. But in this example, there are only three input at the page. But in real scenario, there are more than 50 input. And mapping all these properties is very big work for all page. But when i'm using ngModel it bind automatically. How can i bind automatically? @KrutiChoksiPatel
– Hasan Ozdemir
Oct 4 '18 at 8:32
{ nameSurname : 'Some Name', email : 'example@email.com, age : '24' } Yes this object can be obtained by for loop of keys
– Kruti Choksi Patel
Oct 4 '18 at 10:57
{ nameSurname : 'Some Name', email : 'example@email.com, age : '24' } Yes this object can be obtained by for loop of keys
– Kruti Choksi Patel
Oct 4 '18 at 10:57
add a comment |
Having ngModel
with formGroup
is really odd. You should remove ngModel
and instead bind on valueChanges
on fromGroup and then just iterate through received data and assign values.
//somewhere where form is build
this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));
private onStudentFormValueChange(data) {
this.selectedStudent.age = data.age
this.selectedStudent.email = data.email
this.selectedStudent.nameSurname = data.nameSurname
// or
for (const key in this.studentForm.controls) {
const control = this.studentForm.get(key);
this.selectedStudent[key] = control.value
}
}
How to deal with initial values this way ? assign initial values ? I think this will not auto bind the initial values forinput
,select
, ...
– HDJEMAI
Oct 4 '18 at 8:38
I will start a big project with reactive form. But is this usage have any problem which @HDJEMAI says. Or any other problem?
– Hasan Ozdemir
Oct 4 '18 at 8:50
You mean initialy bind values toselectedStudent
orstudentForm
?
– Patryk Brejdak
Oct 4 '18 at 9:00
Bind to studentForm @PatrykBrejdak
– Hasan Ozdemir
Oct 4 '18 at 9:02
No, it won't assign intial values tostudentForm
since it's just copying values forselectedStudent
fromstudentForm
controls. My bad, I misunderstood your question, it actually depends how your form is build. @HasanOzdemir could you show how you build your form? Are you rebuilding form whenever you switchselectedStudent
?
– Patryk Brejdak
Oct 4 '18 at 9:04
|
show 3 more comments
Having ngModel
with formGroup
is really odd. You should remove ngModel
and instead bind on valueChanges
on fromGroup and then just iterate through received data and assign values.
//somewhere where form is build
this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));
private onStudentFormValueChange(data) {
this.selectedStudent.age = data.age
this.selectedStudent.email = data.email
this.selectedStudent.nameSurname = data.nameSurname
// or
for (const key in this.studentForm.controls) {
const control = this.studentForm.get(key);
this.selectedStudent[key] = control.value
}
}
How to deal with initial values this way ? assign initial values ? I think this will not auto bind the initial values forinput
,select
, ...
– HDJEMAI
Oct 4 '18 at 8:38
I will start a big project with reactive form. But is this usage have any problem which @HDJEMAI says. Or any other problem?
– Hasan Ozdemir
Oct 4 '18 at 8:50
You mean initialy bind values toselectedStudent
orstudentForm
?
– Patryk Brejdak
Oct 4 '18 at 9:00
Bind to studentForm @PatrykBrejdak
– Hasan Ozdemir
Oct 4 '18 at 9:02
No, it won't assign intial values tostudentForm
since it's just copying values forselectedStudent
fromstudentForm
controls. My bad, I misunderstood your question, it actually depends how your form is build. @HasanOzdemir could you show how you build your form? Are you rebuilding form whenever you switchselectedStudent
?
– Patryk Brejdak
Oct 4 '18 at 9:04
|
show 3 more comments
Having ngModel
with formGroup
is really odd. You should remove ngModel
and instead bind on valueChanges
on fromGroup and then just iterate through received data and assign values.
//somewhere where form is build
this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));
private onStudentFormValueChange(data) {
this.selectedStudent.age = data.age
this.selectedStudent.email = data.email
this.selectedStudent.nameSurname = data.nameSurname
// or
for (const key in this.studentForm.controls) {
const control = this.studentForm.get(key);
this.selectedStudent[key] = control.value
}
}
Having ngModel
with formGroup
is really odd. You should remove ngModel
and instead bind on valueChanges
on fromGroup and then just iterate through received data and assign values.
//somewhere where form is build
this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));
private onStudentFormValueChange(data) {
this.selectedStudent.age = data.age
this.selectedStudent.email = data.email
this.selectedStudent.nameSurname = data.nameSurname
// or
for (const key in this.studentForm.controls) {
const control = this.studentForm.get(key);
this.selectedStudent[key] = control.value
}
}
answered Oct 4 '18 at 8:33
Patryk BrejdakPatryk Brejdak
1,015518
1,015518
How to deal with initial values this way ? assign initial values ? I think this will not auto bind the initial values forinput
,select
, ...
– HDJEMAI
Oct 4 '18 at 8:38
I will start a big project with reactive form. But is this usage have any problem which @HDJEMAI says. Or any other problem?
– Hasan Ozdemir
Oct 4 '18 at 8:50
You mean initialy bind values toselectedStudent
orstudentForm
?
– Patryk Brejdak
Oct 4 '18 at 9:00
Bind to studentForm @PatrykBrejdak
– Hasan Ozdemir
Oct 4 '18 at 9:02
No, it won't assign intial values tostudentForm
since it's just copying values forselectedStudent
fromstudentForm
controls. My bad, I misunderstood your question, it actually depends how your form is build. @HasanOzdemir could you show how you build your form? Are you rebuilding form whenever you switchselectedStudent
?
– Patryk Brejdak
Oct 4 '18 at 9:04
|
show 3 more comments
How to deal with initial values this way ? assign initial values ? I think this will not auto bind the initial values forinput
,select
, ...
– HDJEMAI
Oct 4 '18 at 8:38
I will start a big project with reactive form. But is this usage have any problem which @HDJEMAI says. Or any other problem?
– Hasan Ozdemir
Oct 4 '18 at 8:50
You mean initialy bind values toselectedStudent
orstudentForm
?
– Patryk Brejdak
Oct 4 '18 at 9:00
Bind to studentForm @PatrykBrejdak
– Hasan Ozdemir
Oct 4 '18 at 9:02
No, it won't assign intial values tostudentForm
since it's just copying values forselectedStudent
fromstudentForm
controls. My bad, I misunderstood your question, it actually depends how your form is build. @HasanOzdemir could you show how you build your form? Are you rebuilding form whenever you switchselectedStudent
?
– Patryk Brejdak
Oct 4 '18 at 9:04
How to deal with initial values this way ? assign initial values ? I think this will not auto bind the initial values for
input
, select
, ...– HDJEMAI
Oct 4 '18 at 8:38
How to deal with initial values this way ? assign initial values ? I think this will not auto bind the initial values for
input
, select
, ...– HDJEMAI
Oct 4 '18 at 8:38
I will start a big project with reactive form. But is this usage have any problem which @HDJEMAI says. Or any other problem?
– Hasan Ozdemir
Oct 4 '18 at 8:50
I will start a big project with reactive form. But is this usage have any problem which @HDJEMAI says. Or any other problem?
– Hasan Ozdemir
Oct 4 '18 at 8:50
You mean initialy bind values to
selectedStudent
or studentForm
?– Patryk Brejdak
Oct 4 '18 at 9:00
You mean initialy bind values to
selectedStudent
or studentForm
?– Patryk Brejdak
Oct 4 '18 at 9:00
Bind to studentForm @PatrykBrejdak
– Hasan Ozdemir
Oct 4 '18 at 9:02
Bind to studentForm @PatrykBrejdak
– Hasan Ozdemir
Oct 4 '18 at 9:02
No, it won't assign intial values to
studentForm
since it's just copying values for selectedStudent
from studentForm
controls. My bad, I misunderstood your question, it actually depends how your form is build. @HasanOzdemir could you show how you build your form? Are you rebuilding form whenever you switch selectedStudent
?– Patryk Brejdak
Oct 4 '18 at 9:04
No, it won't assign intial values to
studentForm
since it's just copying values for selectedStudent
from studentForm
controls. My bad, I misunderstood your question, it actually depends how your form is build. @HasanOzdemir could you show how you build your form? Are you rebuilding form whenever you switch selectedStudent
?– Patryk Brejdak
Oct 4 '18 at 9:04
|
show 3 more comments
The best way is to use ReactiveForms with formGroup and formControlName. If you want to make it automatic, maybe you can parse your object and for each element you create a new parameter using the element key. Then you can patch the formGroup with your object.
add a comment |
The best way is to use ReactiveForms with formGroup and formControlName. If you want to make it automatic, maybe you can parse your object and for each element you create a new parameter using the element key. Then you can patch the formGroup with your object.
add a comment |
The best way is to use ReactiveForms with formGroup and formControlName. If you want to make it automatic, maybe you can parse your object and for each element you create a new parameter using the element key. Then you can patch the formGroup with your object.
The best way is to use ReactiveForms with formGroup and formControlName. If you want to make it automatic, maybe you can parse your object and for each element you create a new parameter using the element key. Then you can patch the formGroup with your object.
answered Oct 4 '18 at 9:38
thi_pas_baudthi_pas_baud
465
465
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%2f52641557%2fangular-6-deprecation-of-using-formcontrolname-and-ngmodel-together%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