Angular reactive form value don't filled by third-party service
I have a reactive address form and third-party service for address lookups (Loqate in my case, and this service injected by injecting script in HTML).
Few of fields can be autocompleted/autofilled by the service (like in the GIF below). And few of fields are required. When user choose one of suggested address - form filled in UI (HTML), but not in Angular form in the component.
How I can detect changes by third-party service and fill form value?
For example form:
this.addressForm = this.formBuilder.group({
Country: ['', Validators.required],
OrderShippingAddressLine1: ['', Validators.required],
OrderShippingAddressLine2: [''],
OrderShippingAddressPostcode: ['', Validators.required]
});A minimal example of components, but unfortunately without the service on Stackblitz.
javascript
angular typescript angular-reactive-forms angular-forms asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
|
show 2 more comments
I have a reactive address form and third-party service for address lookups (Loqate in my case, and this service injected by injecting script in HTML).
Few of fields can be autocompleted/autofilled by the service (like in the GIF below). And few of fields are required. When user choose one of suggested address - form filled in UI (HTML), but not in Angular form in the component.
How I can detect changes by third-party service and fill form value?
For example form:
this.addressForm = this.formBuilder.group({
Country: ['', Validators.required],
OrderShippingAddressLine1: ['', Validators.required],
OrderShippingAddressLine2: [''],
OrderShippingAddressPostcode: ['', Validators.required]
});A minimal example of components, but unfortunately without the service on Stackblitz.
javascript
angular typescript angular-reactive-forms angular-forms asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
Form Input controls are created in Angular right?
– Suresh Kumar Ariya
Nov 27 '18 at 14:42
Please add some more sample code to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 27 '18 at 14:44
@SiddAjmera I created an example of my components, but unfortunately, I can't integrate service (because it's paid a service) - stackblitz.com/edit/angular-auyzjh
– Art Olshansky
Nov 27 '18 at 15:11
@SureshKumarAriya yes, form controls created in Angular
– Art Olshansky
Nov 27 '18 at 15:14
@ArtOlshansky, your StackBlitz doesn't have the implementation of this "thing" that you're using. I'd urge you to subscribe to thevalueChangeson the form to check if chainging the value on the Post code field actually changes the value of the Address Line 1 field.
– SiddAjmera
Nov 27 '18 at 15:21
|
show 2 more comments
I have a reactive address form and third-party service for address lookups (Loqate in my case, and this service injected by injecting script in HTML).
Few of fields can be autocompleted/autofilled by the service (like in the GIF below). And few of fields are required. When user choose one of suggested address - form filled in UI (HTML), but not in Angular form in the component.
How I can detect changes by third-party service and fill form value?
For example form:
this.addressForm = this.formBuilder.group({
Country: ['', Validators.required],
OrderShippingAddressLine1: ['', Validators.required],
OrderShippingAddressLine2: [''],
OrderShippingAddressPostcode: ['', Validators.required]
});A minimal example of components, but unfortunately without the service on Stackblitz.
javascript
angular typescript angular-reactive-forms angular-forms asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
I have a reactive address form and third-party service for address lookups (Loqate in my case, and this service injected by injecting script in HTML).
Few of fields can be autocompleted/autofilled by the service (like in the GIF below). And few of fields are required. When user choose one of suggested address - form filled in UI (HTML), but not in Angular form in the component.
How I can detect changes by third-party service and fill form value?
For example form:
this.addressForm = this.formBuilder.group({
Country: ['', Validators.required],
OrderShippingAddressLine1: ['', Validators.required],
OrderShippingAddressLine2: [''],
OrderShippingAddressPostcode: ['', Validators.required]
});A minimal example of components, but unfortunately without the service on Stackblitz.
this.addressForm = this.formBuilder.group({
Country: ['', Validators.required],
OrderShippingAddressLine1: ['', Validators.required],
OrderShippingAddressLine2: [''],
OrderShippingAddressPostcode: ['', Validators.required]
});this.addressForm = this.formBuilder.group({
Country: ['', Validators.required],
OrderShippingAddressLine1: ['', Validators.required],
OrderShippingAddressLine2: [''],
OrderShippingAddressPostcode: ['', Validators.required]
});javascript
angular typescript angular-reactive-forms angular-forms javascript
angular typescript angular-reactive-forms angular-forms asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
edited Nov 27 '18 at 15:13
Art Olshansky
asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
asked Nov 27 '18 at 14:32
Art OlshanskyArt Olshansky
7818
7818
Form Input controls are created in Angular right?
– Suresh Kumar Ariya
Nov 27 '18 at 14:42
Please add some more sample code to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 27 '18 at 14:44
@SiddAjmera I created an example of my components, but unfortunately, I can't integrate service (because it's paid a service) - stackblitz.com/edit/angular-auyzjh
– Art Olshansky
Nov 27 '18 at 15:11
@SureshKumarAriya yes, form controls created in Angular
– Art Olshansky
Nov 27 '18 at 15:14
@ArtOlshansky, your StackBlitz doesn't have the implementation of this "thing" that you're using. I'd urge you to subscribe to thevalueChangeson the form to check if chainging the value on the Post code field actually changes the value of the Address Line 1 field.
– SiddAjmera
Nov 27 '18 at 15:21
|
show 2 more comments
Form Input controls are created in Angular right?
– Suresh Kumar Ariya
Nov 27 '18 at 14:42
Please add some more sample code to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 27 '18 at 14:44
@SiddAjmera I created an example of my components, but unfortunately, I can't integrate service (because it's paid a service) - stackblitz.com/edit/angular-auyzjh
– Art Olshansky
Nov 27 '18 at 15:11
@SureshKumarAriya yes, form controls created in Angular
– Art Olshansky
Nov 27 '18 at 15:14
@ArtOlshansky, your StackBlitz doesn't have the implementation of this "thing" that you're using. I'd urge you to subscribe to thevalueChangeson the form to check if chainging the value on the Post code field actually changes the value of the Address Line 1 field.
– SiddAjmera
Nov 27 '18 at 15:21
Form Input controls are created in Angular right?
– Suresh Kumar Ariya
Nov 27 '18 at 14:42
Form Input controls are created in Angular right?
– Suresh Kumar Ariya
Nov 27 '18 at 14:42
Please add some more sample code to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 27 '18 at 14:44
Please add some more sample code to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 27 '18 at 14:44
@SiddAjmera I created an example of my components, but unfortunately, I can't integrate service (because it's paid a service) - stackblitz.com/edit/angular-auyzjh
– Art Olshansky
Nov 27 '18 at 15:11
@SiddAjmera I created an example of my components, but unfortunately, I can't integrate service (because it's paid a service) - stackblitz.com/edit/angular-auyzjh
– Art Olshansky
Nov 27 '18 at 15:11
@SureshKumarAriya yes, form controls created in Angular
– Art Olshansky
Nov 27 '18 at 15:14
@SureshKumarAriya yes, form controls created in Angular
– Art Olshansky
Nov 27 '18 at 15:14
@ArtOlshansky, your StackBlitz doesn't have the implementation of this "thing" that you're using. I'd urge you to subscribe to the
valueChanges on the form to check if chainging the value on the Post code field actually changes the value of the Address Line 1 field.– SiddAjmera
Nov 27 '18 at 15:21
@ArtOlshansky, your StackBlitz doesn't have the implementation of this "thing" that you're using. I'd urge you to subscribe to the
valueChanges on the form to check if chainging the value on the Post code field actually changes the value of the Address Line 1 field.– SiddAjmera
Nov 27 '18 at 15:21
|
show 2 more comments
2 Answers
2
active
oldest
votes
You can use detectChanges() in built angular function to detect changes automatically.You can get more information on this link. If you still face issue share code and angular version.
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
add a comment |
If you use Loqate (as I do), you need to know about pca object in you window object.
Loqate support sent me that piece of code for triggering change event
pca.on("data", function(source, key, address, variations) {
if (source === "address") {
for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
if (pcaField) {
pca.fire(pcaField, "change");
};
};
};
});Few more strings of code for change/patch form controls value and updateValueAndValidity, and that works
answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
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%2f53501990%2fangular-reactive-form-value-dont-filled-by-third-party-service%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
You can use detectChanges() in built angular function to detect changes automatically.You can get more information on this link. If you still face issue share code and angular version.
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
add a comment |
You can use detectChanges() in built angular function to detect changes automatically.You can get more information on this link. If you still face issue share code and angular version.
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
add a comment |
You can use detectChanges() in built angular function to detect changes automatically.You can get more information on this link. If you still face issue share code and angular version.
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
You can use detectChanges() in built angular function to detect changes automatically.You can get more information on this link. If you still face issue share code and angular version.
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
answered Nov 27 '18 at 14:42
Ashu KharbandaAshu Kharbanda
12
12
add a comment |
add a comment |
If you use Loqate (as I do), you need to know about pca object in you window object.
Loqate support sent me that piece of code for triggering change event
pca.on("data", function(source, key, address, variations) {
if (source === "address") {
for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
if (pcaField) {
pca.fire(pcaField, "change");
};
};
};
});Few more strings of code for change/patch form controls value and updateValueAndValidity, and that works
answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
add a comment |
If you use Loqate (as I do), you need to know about pca object in you window object.
Loqate support sent me that piece of code for triggering change event
pca.on("data", function(source, key, address, variations) {
if (source === "address") {
for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
if (pcaField) {
pca.fire(pcaField, "change");
};
};
};
});Few more strings of code for change/patch form controls value and updateValueAndValidity, and that works
answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
add a comment |
If you use Loqate (as I do), you need to know about pca object in you window object.
Loqate support sent me that piece of code for triggering change event
pca.on("data", function(source, key, address, variations) {
if (source === "address") {
for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
if (pcaField) {
pca.fire(pcaField, "change");
};
};
};
});Few more strings of code for change/patch form controls value and updateValueAndValidity, and that works
answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
If you use Loqate (as I do), you need to know about pca object in you window object.
Loqate support sent me that piece of code for triggering change event
pca.on("data", function(source, key, address, variations) {
if (source === "address") {
for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
if (pcaField) {
pca.fire(pcaField, "change");
};
};
};
});Few more strings of code for change/patch form controls value and updateValueAndValidity, and that works
pca.on("data", function(source, key, address, variations) {
if (source === "address") {
for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
if (pcaField) {
pca.fire(pcaField, "change");
};
};
};
});pca.on("data", function(source, key, address, variations) {
if (source === "address") {
for (var i = 0; i < pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields.length; i++) {
var pcaField = document.getElementById(pca.platform.productList[key].PLATFORM_CAPTUREPLUS.bindings[0].fields[i].element);
if (pcaField) {
pca.fire(pcaField, "change");
};
};
};
});answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
answered Dec 3 '18 at 10:29
Art OlshanskyArt Olshansky
7818
7818
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%2f53501990%2fangular-reactive-form-value-dont-filled-by-third-party-service%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
Form Input controls are created in Angular right?
– Suresh Kumar Ariya
Nov 27 '18 at 14:42
Please add some more sample code to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 27 '18 at 14:44
@SiddAjmera I created an example of my components, but unfortunately, I can't integrate service (because it's paid a service) - stackblitz.com/edit/angular-auyzjh
– Art Olshansky
Nov 27 '18 at 15:11
@SureshKumarAriya yes, form controls created in Angular
– Art Olshansky
Nov 27 '18 at 15:14
@ArtOlshansky, your StackBlitz doesn't have the implementation of this "thing" that you're using. I'd urge you to subscribe to the
valueChangeson the form to check if chainging the value on the Post code field actually changes the value of the Address Line 1 field.– SiddAjmera
Nov 27 '18 at 15:21