第三方服务不填充角度反应表单值

Posted 2023-02-24

【中文标题】第三方服务不填充角度反应表单值

【英文标题】：Angular reactive form value don't filled by third-party service

【发布时间】：2018-11-27 14:32:35

【问题描述】：

我有一个用于地址查找的响应式地址表单和第三方服务（在我的例子中是 Loqate，并且通过在 html 中注入脚本来注入此服务）。

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

如何检测第三方服务的变化并填写表单值？

例如表格：

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

一个最小的组件示例，但遗憾的是没有Stackblitz 上的服务。

【问题讨论】：

表单输入控件是在 Angular 中创建的吧？

请添加更多示例代码以供使用。如果您能提供Minimal, Complete, and Verifiable example，那就太好了。您可以使用StackBlitz 创建一个。

@SiddAjmera 我创建了我的组件示例，但不幸的是，我无法集成服务（因为它是付费服务）-stackblitz.com/edit/angular-auyzjh

@SureshKumarAriya 是的，在 Angular 中创建的表单控件

@ArtOlshansky，你的 StackBlitz 没有你正在使用的这个“thing”的实现。我强烈建议您订阅表单上的 valueChanges，以检查链接邮政编码字段上的值是否实际上会更改地址行 1 字段的值。

【参考方案1】：

您可以在内置的角度函数中使用 detectChanges() 来自动检测更改。您可以获取有关此link 的更多信息。如果您仍然遇到问题共享代码和角度版本。

【参考方案2】：

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

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

用于更改/修补表单控件值和updateValueAndValidity 的代码字符串很少，并且有效