Angular third-party 服务未填写反应式表单值

Question

我有一个反应式地址表和 third-party 地址查找服务 （在我的例子中是 Loqate，这个服务是通过在 HTML 中注入脚本来注入的）.

服务可以autocompleted/autofilled很少的字段（如下面的 GIF）。并且很少有字段是必需的。当用户选择建议地址之一时 - 在组件中填写 UI (HTML) 表单，而不是 Angular 表单。

如何通过 third-party 服务检测更改并填写表单值？

例如表格：

this.addressForm = this.formBuilder.group({
  Country: ['', Validators.required],
  OrderShippingAddressLine1: ['', Validators.required],
  OrderShippingAddressLine2: [''],
  OrderShippingAddressPostcode: ['', Validators.required]
});

组件的最小示例，但不幸的是 Stackblitz 上没有服务。

Answer 1

您可以使用内置 angular 函数中的 detectChanges() 来检测更改 automatically.You 可以获得关于此 link 的更多信息。如果您仍然面临共享代码和 angular 版本的问题。

Answer 2

如果您使用 Loqate （像我一样），您需要了解 window 对象中的 pca 对象。

Loqate 支持发给我那段触发更改事件的代码

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");
      };
    };
  };
});

change/patch 表单控件值和 updateValueAndValidity 的更多代码字符串，并且有效

Angular third-party 服务未填写反应式表单值

Angular reactive form value don't filled by third-party service

javascript

angular

typescript

angular-reactive-forms

angular-forms