Mixing
Reactive Forms patchValue() in For loop
1
Following sample code:
model={name: "D100"
value: "Dying"};
for (let key in model) {
if(this.divisionForm.controls.hasOwnProperty(key)) {
let value = divisionModel[key];
this.form.patchValue({
key: value
});
}
}
- Is there any way to achieve the looping object and insert key value pair into the Angular reactive form's patchValue()
- I cannot have values to get set in form i can achieve this by manually add setValue() and use destructuring to get the objects and set which leads very long code in bigger forms.
I have structed in this for long time kindly help me. Thanks in advance.
angular typescript angular2-forms angular-reactive-forms reactive-forms
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
add a comment |
1
Following sample code:
model={name: "D100"
value: "Dying"};
for (let key in model) {
if(this.divisionForm.controls.hasOwnProperty(key)) {
let value = divisionModel[key];
this.form.patchValue({
key: value
});
}
}
- Is there any way to achieve the looping object and insert key value pair into the Angular reactive form's patchValue()
- I cannot have values to get set in form i can achieve this by manually add setValue() and use destructuring to get the objects and set which leads very long code in bigger forms.
I have structed in this for long time kindly help me. Thanks in advance.
angular typescript angular2-forms angular-reactive-forms reactive-forms
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
add a comment |
1
1
1
Following sample code:
model={name: "D100"
value: "Dying"};
for (let key in model) {
if(this.divisionForm.controls.hasOwnProperty(key)) {
let value = divisionModel[key];
this.form.patchValue({
key: value
});
}
}
- Is there any way to achieve the looping object and insert key value pair into the Angular reactive form's patchValue()
- I cannot have values to get set in form i can achieve this by manually add setValue() and use destructuring to get the objects and set which leads very long code in bigger forms.
I have structed in this for long time kindly help me. Thanks in advance.
angular typescript angular2-forms angular-reactive-forms reactive-forms
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
Following sample code:
model={name: "D100"
value: "Dying"};
for (let key in model) {
if(this.divisionForm.controls.hasOwnProperty(key)) {
let value = divisionModel[key];
this.form.patchValue({
key: value
});
}
}
- Is there any way to achieve the looping object and insert key value pair into the Angular reactive form's patchValue()
- I cannot have values to get set in form i can achieve this by manually add setValue() and use destructuring to get the objects and set which leads very long code in bigger forms.
I have structed in this for long time kindly help me. Thanks in advance.
angular typescript angular2-forms angular-reactive-forms reactive-forms
angular typescript angular2-forms angular-reactive-forms reactive-forms
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
edited Nov 21 '18 at 14:00
trichetriche
26.9k42256
26.9k42256
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
asked Nov 21 '18 at 13:53
DineshkumarVellingiriDineshkumarVellingiri
135
135
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
Simply spread your form value and override the properties you want to change.
As a sidenote, patchValue is supposed to keep the values of the keys you don't provide, e.g. giving a single key will keep all other keys to their actual value.
Here is a stackblitz : https://stackblitz.com/edit/angular-xlxcic?file=src%2Fapp%2Fapp.component.ts
constructor() {
const form = new FormGroup({
name: new FormControl(''),
surname: new FormControl('')
});
form.patchValue({
...form.value,
name: 'name of the user'
});
form.patchValue({
surname: 'surname of the user, with name kept'
});
console.log(form.value);
}
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
trichetriche Thanks for your valuable reply. I would be pleased to have your response. But still your answer doesn't suit my question. My question is that can i achieve that patchValue() insertion in looping concept ? I have tried your technique but still no improvement.
– DineshkumarVellingiri
Nov 22 '18 at 4:32
With two seconds of self thinking, you would probably understand that the second syntax can be used in loops ... But if you want me to be more specific, feel free to post some data and your model, or even a Minimal, Complete, and Verifiable example of your question on stackblitz.com so that I can show you how it's done.
– trichetriche
Nov 22 '18 at 8:06
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%2f53413627%2freactive-forms-patchvalue-in-for-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Simply spread your form value and override the properties you want to change.
As a sidenote, patchValue is supposed to keep the values of the keys you don't provide, e.g. giving a single key will keep all other keys to their actual value.
Here is a stackblitz : https://stackblitz.com/edit/angular-xlxcic?file=src%2Fapp%2Fapp.component.ts
constructor() {
const form = new FormGroup({
name: new FormControl(''),
surname: new FormControl('')
});
form.patchValue({
...form.value,
name: 'name of the user'
});
form.patchValue({
surname: 'surname of the user, with name kept'
});
console.log(form.value);
}
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
trichetriche Thanks for your valuable reply. I would be pleased to have your response. But still your answer doesn't suit my question. My question is that can i achieve that patchValue() insertion in looping concept ? I have tried your technique but still no improvement.
– DineshkumarVellingiri
Nov 22 '18 at 4:32
With two seconds of self thinking, you would probably understand that the second syntax can be used in loops ... But if you want me to be more specific, feel free to post some data and your model, or even a Minimal, Complete, and Verifiable example of your question on stackblitz.com so that I can show you how it's done.
– trichetriche
Nov 22 '18 at 8:06
add a comment |
2
Simply spread your form value and override the properties you want to change.
As a sidenote, patchValue is supposed to keep the values of the keys you don't provide, e.g. giving a single key will keep all other keys to their actual value.
Here is a stackblitz : https://stackblitz.com/edit/angular-xlxcic?file=src%2Fapp%2Fapp.component.ts
constructor() {
const form = new FormGroup({
name: new FormControl(''),
surname: new FormControl('')
});
form.patchValue({
...form.value,
name: 'name of the user'
});
form.patchValue({
surname: 'surname of the user, with name kept'
});
console.log(form.value);
}
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
trichetriche Thanks for your valuable reply. I would be pleased to have your response. But still your answer doesn't suit my question. My question is that can i achieve that patchValue() insertion in looping concept ? I have tried your technique but still no improvement.
– DineshkumarVellingiri
Nov 22 '18 at 4:32
With two seconds of self thinking, you would probably understand that the second syntax can be used in loops ... But if you want me to be more specific, feel free to post some data and your model, or even a Minimal, Complete, and Verifiable example of your question on stackblitz.com so that I can show you how it's done.
– trichetriche
Nov 22 '18 at 8:06
add a comment |
2
2
2
Simply spread your form value and override the properties you want to change.
As a sidenote, patchValue is supposed to keep the values of the keys you don't provide, e.g. giving a single key will keep all other keys to their actual value.
Here is a stackblitz : https://stackblitz.com/edit/angular-xlxcic?file=src%2Fapp%2Fapp.component.ts
constructor() {
const form = new FormGroup({
name: new FormControl(''),
surname: new FormControl('')
});
form.patchValue({
...form.value,
name: 'name of the user'
});
form.patchValue({
surname: 'surname of the user, with name kept'
});
console.log(form.value);
}
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
Simply spread your form value and override the properties you want to change.
As a sidenote, patchValue is supposed to keep the values of the keys you don't provide, e.g. giving a single key will keep all other keys to their actual value.
Here is a stackblitz : https://stackblitz.com/edit/angular-xlxcic?file=src%2Fapp%2Fapp.component.ts
constructor() {
const form = new FormGroup({
name: new FormControl(''),
surname: new FormControl('')
});
form.patchValue({
...form.value,
name: 'name of the user'
});
form.patchValue({
surname: 'surname of the user, with name kept'
});
console.log(form.value);
}
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
answered Nov 21 '18 at 14:00
trichetrichetrichetriche
26.9k42256
26.9k42256
trichetriche Thanks for your valuable reply. I would be pleased to have your response. But still your answer doesn't suit my question. My question is that can i achieve that patchValue() insertion in looping concept ? I have tried your technique but still no improvement.
– DineshkumarVellingiri
Nov 22 '18 at 4:32
With two seconds of self thinking, you would probably understand that the second syntax can be used in loops ... But if you want me to be more specific, feel free to post some data and your model, or even a Minimal, Complete, and Verifiable example of your question on stackblitz.com so that I can show you how it's done.
– trichetriche
Nov 22 '18 at 8:06
add a comment |
trichetriche Thanks for your valuable reply. I would be pleased to have your response. But still your answer doesn't suit my question. My question is that can i achieve that patchValue() insertion in looping concept ? I have tried your technique but still no improvement.
– DineshkumarVellingiri
Nov 22 '18 at 4:32
With two seconds of self thinking, you would probably understand that the second syntax can be used in loops ... But if you want me to be more specific, feel free to post some data and your model, or even a Minimal, Complete, and Verifiable example of your question on stackblitz.com so that I can show you how it's done.
– trichetriche
Nov 22 '18 at 8:06
trichetriche Thanks for your valuable reply. I would be pleased to have your response. But still your answer doesn't suit my question. My question is that can i achieve that patchValue() insertion in looping concept ? I have tried your technique but still no improvement.
– DineshkumarVellingiri
Nov 22 '18 at 4:32
trichetriche Thanks for your valuable reply. I would be pleased to have your response. But still your answer doesn't suit my question. My question is that can i achieve that patchValue() insertion in looping concept ? I have tried your technique but still no improvement.
– DineshkumarVellingiri
Nov 22 '18 at 4:32
With two seconds of self thinking, you would probably understand that the second syntax can be used in loops ... But if you want me to be more specific, feel free to post some data and your model, or even a Minimal, Complete, and Verifiable example of your question on stackblitz.com so that I can show you how it's done.
– trichetriche
Nov 22 '18 at 8:06
With two seconds of self thinking, you would probably understand that the second syntax can be used in loops ... But if you want me to be more specific, feel free to post some data and your model, or even a Minimal, Complete, and Verifiable example of your question on stackblitz.com so that I can show you how it's done.
– trichetriche
Nov 22 '18 at 8:06
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%2f53413627%2freactive-forms-patchvalue-in-for-loop%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
