如何在Angular中动态加载Typeform？是否有提交API？

一、动态加载表单的正确方式 #

直接动态添加data-tf-widget属性无法触发渲染，因为Typeform Embed SDK在页面初始加载时就完成了对静态DOM元素的扫描。正确做法是使用SDK提供的JavaScript API手动初始化表单：

1. 先在项目的index.html中引入Embed SDK脚本：

<script src="//embed.typeform.com/next/embed.js"></script>

2. 在Angular组件中通过API渲染动态获取的表单：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

// 声明全局Typeform Embed对象
declare var tf: any;

@Component({
  selector: 'app-typeform',
  template: '<div #formContainer></div>'
})
export class TypeformComponent implements OnInit {
  @ViewChild('formContainer') formContainer!: ElementRef;
  private formInstance: any;
  formId: string = '';

  ngOnInit(): void {
    // 从API获取form-id后渲染表单
    this.getFormIdFromApi().then(id => {
      this.formId = id;
      this.renderTypeform();
    });
  }

  // 模拟API请求获取form-id
  async getFormIdFromApi(): Promise<string> {
    const res = await fetch('你的API地址');
    const data = await res.json();
    return data.formId;
  }

  renderTypeform(): void {
    // 初始化并渲染表单
    this.formInstance = tf.createWidget(this.formId, {
      container: this.formContainer.nativeElement,
      width: '100%',
      height: '700px',
      // 可添加其他配置，如hideHeaders: true、hideFooter: true等
    });
  }
}

二、重新渲染表单的方法 #

如果需要切换form-id重新渲染，先销毁旧实例再创建新实例即可：

updateForm(newFormId: string): void {
  // 销毁旧表单实例
  if (this.formInstance) {
    this.formInstance.destroy();
  }
  // 更新form-id并渲染新表单
  this.formId = newFormId;
  this.renderTypeform();
}

三、Typeform提交相关的处理方式 #

1. 前端监听提交事件：在渲染表单时配置onSubmit回调，实时获取提交状态：

renderTypeform(): void {
  this.formInstance = tf.createWidget(this.formId, {
    container: this.formContainer.nativeElement,
    onSubmit: (event: any) => {
      console.log('表单已提交，响应ID:', event.response_id);
      // 这里可执行提交后的业务逻辑，比如跳转页面、提示用户等
    }
  });
}

2. API获取提交数据：Typeform提供官方API，可通过API密钥调用/forms/{form-id}/responses端点，获取指定表单的所有提交记录。此外也可配置Webhooks，当表单有新提交时，Typeform会主动推送数据到你指定的后端地址。

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