如何通过turbo_stream填充intl-tel-input字段并自动匹配国旗？

问题出在Turbo Stream仅修改了输入框的value属性，但intl-tel-input组件无法感知到这个非用户触发的数值变化，因此不会自动匹配对应国家的国旗。需要手动调用组件的API来同步号码与国旗状态。

方案一：通过Turbo Stream调用Stimulus方法更新组件 #

1. 修改Turbo Stream代码 #

在设置输入框值的同时，调用Stimulus控制器的方法来更新intl-tel-input：

= turbo_stream.set_value '#phone_field', @contact.phone_number 
= turbo_stream.invoke 'phone_number#updateNumber', args: { number: @contact.phone_number }

2. 扩展Stimulus控制器 #

添加一个updateNumber方法，直接调用intl-tel-input的setNumber API同步号码与国旗：

import { Controller } from "@hotwired/stimulus"
import intlTelInput from 'intl-tel-input';

export default class extends Controller {
  static targets = ['input']

  connect() {
    this.iti = intlTelInput(this.inputTarget, {
      utilsScript: "/assets/utils.js",
      strictMode: true,
      countryOrder: ["BR", "PT", "ST", "CV", "LU", "FR", "GB"]
    });

    const formElement = this.inputTarget.closest("form");
    if (formElement) {
      formElement.addEventListener("submit", (event) => {
        this.inputTarget.value = this.iti.getNumber();
      });
    }
  }

  // 新增方法：更新号码并同步国旗
  updateNumber({ number }) {
    this.iti.setNumber(number);
  }
}

方案二：监听Turbo渲染事件自动同步 #

如果不想修改Turbo Stream，可以在Stimulus控制器中监听Turbo的渲染完成事件，自动检测输入框值并更新组件：

connect() {
  // 原有的初始化代码...

  // 监听Turbo页面渲染/更新事件
  document.addEventListener('turbo:render', () => {
    const currentValue = this.inputTarget.value;
    if (currentValue) {
      this.iti.setNumber(currentValue);
    }
  });
}

原理说明 #

intl-tel-input组件仅对用户手动输入或通过自身API修改的号码进行国家匹配。通过Turbo Stream直接修改input的value属于DOM属性变更，组件不会主动监听这类变化，因此必须手动调用setNumber方法触发国旗更新。

内容的提问来源于stack exchange，提问作者Hector Guarçoni