如何将AEM Adobe Adaptive Forms集成到Angular应用中？

1. AEM端前置准备 #

• 确保目标Adaptive Form已在AEM实例中发布，且开启了表单渲染服务（Form Rendering Service）
• 生成表单嵌入资源：在AEM中打开对应表单，进入「表单设置」-「嵌入选项」，获取表单的发布URL或API端点

2. 集成方式选择 #

方式一：iframe快速嵌入（适合无深度交互场景） #

直接在Angular组件模板中添加iframe标签，指向AEM表单的发布地址：

<iframe 
  src="https://你的AEM实例域名/content/forms/af/目标表单路径.html"
  width="100%" 
  height="800px"
  frameborder="0"
  title="嵌入的AEM自适应表单"
></iframe>

注意：需在AEM的CORS配置中添加Angular项目域名，避免跨域访问问题

方式二：AEM Forms SDK集成（支持深度交互） #

如果需要和Angular项目做数据同步、自定义样式或逻辑，推荐使用官方SDK：

1. 安装SDK依赖：

npm install @adobe/aem-forms-sdk --save

2. 在Angular组件中初始化并加载表单：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { FormsSDK } from '@adobe/aem-forms-sdk';

@Component({
  selector: 'app-aem-form',
  templateUrl: './aem-form.component.html',
  styleUrls: ['./aem-form.component.css']
})
export class AemFormComponent implements OnInit {
  @ViewChild('formContainer') formContainer!: ElementRef;

  ngOnInit(): void {
    FormsSDK.init({
      formUrl: 'https://你的AEM实例域名/content/forms/af/目标表单路径',
      container: this.formContainer.nativeElement,
      options: {
        locale: 'zh-CN',
        theme: 'custom'
      }
    }).then(formInstance => {
      // 监听表单提交事件，对接Angular业务逻辑
      formInstance.on('submit', (submitData) => {
        console.log('表单提交数据:', submitData);
        // 这里可以处理提交后的跳转、数据存储等操作
      });
    }).catch(err => {
      console.error('表单加载失败:', err);
    });
  }
}

3. 组件模板中添加表单容器：

<div #formContainer></div>

4. 样式适配：通过覆盖SDK的CSS类或传入自定义主题参数，匹配Angular项目的样式体系

3. 数据交互与状态同步 #

• 表单预填充：初始化SDK时传入Angular中的用户数据，实现表单自动填充：

FormsSDK.init({
  // 其他配置项
  prefillData: {
    userName: this.currentUser.name,
    userEmail: this.currentUser.email
  }
})

• 字段状态监听：监听表单字段变化、验证状态，同步到Angular组件：

formInstance.on('fieldChange', (fieldInfo) => {
  console.log('字段更新:', fieldInfo);
  // 更新Angular组件内的对应数据
});

4. 部署与跨域配置 #

• 完成开发后，在AEM的/system/console/configMgr中找到「Adobe Granite Cross-Origin Resource Sharing Policy」，将Angular项目的部署域名添加到允许列表
• 若使用SDK方式，确保AEM表单服务端点可被Angular项目正常访问，必要时配置Angular反向代理

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