Angular 2+: how to subscribe to form valueChanges of whitelisted fields?
I've a big form and would like to listen to the changes of 5 specific fields.
I can listend to the entire form:
this.form.valueChanges.subscribe(data => {
// do something, because any field changed
});
or to a single field:
this.form.get('my_single_field').valueChanges.subscribe(data => {
// do something, because my_single_field changed
});
Desired:
but I would like to have something like:
this.form.get(['field1', 'field5']).valueChanges.subscribe(data => {
// do something, because field1 or field5 changed
});
or:
this.form.valueChanges.subscribe(data, changedField => {
// do something, because changedField changed
});
Any idea? Thanks!
javascript
angular angular2-forms edited Apr 20 '18 at 14:23
Sandy_22
111119
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
add a comment |
I've a big form and would like to listen to the changes of 5 specific fields.
I can listend to the entire form:
this.form.valueChanges.subscribe(data => {
// do something, because any field changed
});
or to a single field:
this.form.get('my_single_field').valueChanges.subscribe(data => {
// do something, because my_single_field changed
});
Desired:
but I would like to have something like:
this.form.get(['field1', 'field5']).valueChanges.subscribe(data => {
// do something, because field1 or field5 changed
});
or:
this.form.valueChanges.subscribe(data, changedField => {
// do something, because changedField changed
});
Any idea? Thanks!
javascript
angular angular2-forms edited Apr 20 '18 at 14:23
Sandy_22
111119
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
add a comment |
I've a big form and would like to listen to the changes of 5 specific fields.
I can listend to the entire form:
this.form.valueChanges.subscribe(data => {
// do something, because any field changed
});
or to a single field:
this.form.get('my_single_field').valueChanges.subscribe(data => {
// do something, because my_single_field changed
});
Desired:
but I would like to have something like:
this.form.get(['field1', 'field5']).valueChanges.subscribe(data => {
// do something, because field1 or field5 changed
});
or:
this.form.valueChanges.subscribe(data, changedField => {
// do something, because changedField changed
});
Any idea? Thanks!
javascript
angular angular2-forms edited Apr 20 '18 at 14:23
Sandy_22
111119
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
I've a big form and would like to listen to the changes of 5 specific fields.
I can listend to the entire form:
this.form.valueChanges.subscribe(data => {
// do something, because any field changed
});
or to a single field:
this.form.get('my_single_field').valueChanges.subscribe(data => {
// do something, because my_single_field changed
});
Desired:
but I would like to have something like:
this.form.get(['field1', 'field5']).valueChanges.subscribe(data => {
// do something, because field1 or field5 changed
});
or:
this.form.valueChanges.subscribe(data, changedField => {
// do something, because changedField changed
});
Any idea? Thanks!
javascript
angular angular2-forms javascript
angular angular2-forms edited Apr 20 '18 at 14:23
Sandy_22
111119
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
edited Apr 20 '18 at 14:23
Sandy_22
111119
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
edited Apr 20 '18 at 14:23
Sandy_22
111119
edited Apr 20 '18 at 14:23
Sandy_22
111119
edited Apr 20 '18 at 14:23
Sandy_22
111119
111119
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
asked Apr 20 '18 at 14:19
Mr. B.Mr. B.
2,79943563
2,79943563
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Edit:
You can add below function as prototype on Form.
Previous:
Use merge from rxjs. Function should be like this.
function listenChangesOn(form,fields:string){
return Observable.merge(fields.map(field=>form.get(field).valueChanges))
}
and can use like
listenChangesOn(form,['field1','field2']).subscribe(a=>..)
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
1
Thanks for your answer! I've put your solution in thengOnInit(), but it fires only one time (on init). Could you please give me an example, wrapped in a class? Thank you!
– Mr. B.
Apr 20 '18 at 15:46
add a comment |
I faced a similar issue. I wanted to listen the entire form except one field, and solved by listening the entire form as you do, and inside the observer function put a conditional asking if this field is touched. Would be something like this:
this.form.valueChanges.subscribe(data => {
if (this.form.controls['field1'].touched) return;
// do something, because any other field changed
});
Of course you can do the inverse way, by listening the specific fields you need.
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
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%2f49943807%2fangular-2-how-to-subscribe-to-form-valuechanges-of-whitelisted-fields%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
Edit:
You can add below function as prototype on Form.
Previous:
Use merge from rxjs. Function should be like this.
function listenChangesOn(form,fields:string){
return Observable.merge(fields.map(field=>form.get(field).valueChanges))
}
and can use like
listenChangesOn(form,['field1','field2']).subscribe(a=>..)
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
1
Thanks for your answer! I've put your solution in thengOnInit(), but it fires only one time (on init). Could you please give me an example, wrapped in a class? Thank you!
– Mr. B.
Apr 20 '18 at 15:46
add a comment |
Edit:
You can add below function as prototype on Form.
Previous:
Use merge from rxjs. Function should be like this.
function listenChangesOn(form,fields:string){
return Observable.merge(fields.map(field=>form.get(field).valueChanges))
}
and can use like
listenChangesOn(form,['field1','field2']).subscribe(a=>..)
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
1
Thanks for your answer! I've put your solution in thengOnInit(), but it fires only one time (on init). Could you please give me an example, wrapped in a class? Thank you!
– Mr. B.
Apr 20 '18 at 15:46
add a comment |
Edit:
You can add below function as prototype on Form.
Previous:
Use merge from rxjs. Function should be like this.
function listenChangesOn(form,fields:string){
return Observable.merge(fields.map(field=>form.get(field).valueChanges))
}
and can use like
listenChangesOn(form,['field1','field2']).subscribe(a=>..)
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
Edit:
You can add below function as prototype on Form.
Previous:
Use merge from rxjs. Function should be like this.
function listenChangesOn(form,fields:string){
return Observable.merge(fields.map(field=>form.get(field).valueChanges))
}
and can use like
listenChangesOn(form,['field1','field2']).subscribe(a=>..)
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
edited Apr 20 '18 at 14:44
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
answered Apr 20 '18 at 14:33
amit77309amit77309
3,86631119
3,86631119
1
Thanks for your answer! I've put your solution in thengOnInit(), but it fires only one time (on init). Could you please give me an example, wrapped in a class? Thank you!
– Mr. B.
Apr 20 '18 at 15:46
add a comment |
1
Thanks for your answer! I've put your solution in thengOnInit(), but it fires only one time (on init). Could you please give me an example, wrapped in a class? Thank you!
– Mr. B.
Apr 20 '18 at 15:46
1
1
Thanks for your answer! I've put your solution in the
ngOnInit(), but it fires only one time (on init). Could you please give me an example, wrapped in a class? Thank you!– Mr. B.
Apr 20 '18 at 15:46
Thanks for your answer! I've put your solution in the
ngOnInit(), but it fires only one time (on init). Could you please give me an example, wrapped in a class? Thank you!– Mr. B.
Apr 20 '18 at 15:46
add a comment |
I faced a similar issue. I wanted to listen the entire form except one field, and solved by listening the entire form as you do, and inside the observer function put a conditional asking if this field is touched. Would be something like this:
this.form.valueChanges.subscribe(data => {
if (this.form.controls['field1'].touched) return;
// do something, because any other field changed
});
Of course you can do the inverse way, by listening the specific fields you need.
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
add a comment |
I faced a similar issue. I wanted to listen the entire form except one field, and solved by listening the entire form as you do, and inside the observer function put a conditional asking if this field is touched. Would be something like this:
this.form.valueChanges.subscribe(data => {
if (this.form.controls['field1'].touched) return;
// do something, because any other field changed
});
Of course you can do the inverse way, by listening the specific fields you need.
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
add a comment |
I faced a similar issue. I wanted to listen the entire form except one field, and solved by listening the entire form as you do, and inside the observer function put a conditional asking if this field is touched. Would be something like this:
this.form.valueChanges.subscribe(data => {
if (this.form.controls['field1'].touched) return;
// do something, because any other field changed
});
Of course you can do the inverse way, by listening the specific fields you need.
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
I faced a similar issue. I wanted to listen the entire form except one field, and solved by listening the entire form as you do, and inside the observer function put a conditional asking if this field is touched. Would be something like this:
this.form.valueChanges.subscribe(data => {
if (this.form.controls['field1'].touched) return;
// do something, because any other field changed
});
Of course you can do the inverse way, by listening the specific fields you need.
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
answered Nov 21 '18 at 14:55
javier Cuervasjavier Cuervas
1473
1473
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%2f49943807%2fangular-2-how-to-subscribe-to-form-valuechanges-of-whitelisted-fields%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
