如何通过外部JavaScript设置Angular表单中textarea的值？

针对Angular Formly生成的textarea（id为formly_14_textarea_description_1），外部JS直接修改value等属性无效的核心原因是：Angular表单依赖InputEvent同步视图与模型，直接修改属性不会触发框架的变更检测。以下是可行的解决步骤：

• 第一步：获取目标textarea元素

  const textarea = document.getElementById('formly_14_textarea_description_1');
  

• 第二步：设置文本框值
  先直接修改value属性填充内容：

  textarea.value = '需要设置的文本内容';
  

• 第三步：触发Angular识别的事件
  构造并分发input事件，强制Angular更新表单模型；额外触发change事件确保表单验证逻辑执行：

  // 触发input事件，同步模型
  const inputEvent = new InputEvent('input', {
    bubbles: true,
    cancelable: true,
    composed: true // 适配可能存在的Shadow DOM结构
  });
  textarea.dispatchEvent(inputEvent);
  
  // 触发change事件，更新表单状态
  const changeEvent = new Event('change', { bubbles: true });
  textarea.dispatchEvent(changeEvent);
  

完整代码示例：

const textarea = document.getElementById('formly_14_textarea_description_1');
if (textarea) {
  textarea.value = '你的目标文本';
  
  const inputEvent = new InputEvent('input', {
    bubbles: true,
    cancelable: true,
    composed: true
  });
  textarea.dispatchEvent(inputEvent);

  const changeEvent = new Event('change', { bubbles: true });
  textarea.dispatchEvent(changeEvent);
}

说明：

• 无需直接访问ng-model对象，通过标准事件即可触发Angular的变更检测机制。
• composed: true参数用于兼容部分封装在Shadow DOM中的Formly组件，确保事件能穿透到Angular的监听逻辑。

内容的提问来源于stack exchange，提问作者ishandutta2007