如何在Alfresco ADF组件中访问Stencil的其他嵌入式表单字段？

下面是几个经过实践验证的可行方案，你可以根据自己的业务场景灵活选择：

方案1：通过父表单的字段实例直接访问嵌入式表单内部字段 #

当你在ADF中使用Stencil嵌入式表单时，这个嵌入式表单本质上是父表单的一个FormField实例。你可以借助ADF的formService或者表单组件的fields属性定位到它，进而访问其内部的表单结构和字段数据。

代码示例（Angular环境）： #

import { Component, ViewChild } from '@angular/core';
import { FormComponent, FormService, FormField } from '@alfresco/adf-core';

@Component({
  selector: 'app-custom-form',
  templateUrl: './custom-form.component.html'
})
export class CustomFormComponent {
  @ViewChild(FormComponent) formComponent: FormComponent;

  constructor(private formService: FormService) {}

  accessEmbeddedFields() {
    // 找到嵌入式表单对应的字段（替换成你实际的字段ID）
    const embeddedField: FormField = this.formComponent.fields.find(
      field => field.id === 'embedded_form_container'
    );

    if (embeddedField && embeddedField.form) {
      // embeddedField.form就是Stencil嵌入式表单的实例
      const embeddedFormFields = embeddedField.form.fields;
      
      // 遍历所有内部字段
      embeddedFormFields.forEach(field => {
        console.log(`嵌入式字段ID: ${field.id}, 当前值: ${field.value}`);
      });

      // 精准获取某个特定内部字段的值
      const targetField = embeddedFormFields.find(f => f.id === 'user_email');
      if (targetField) {
        console.log('目标字段值:', targetField.value);
      }
    }
  }
}

方案2：自定义Stencil表单组件并暴露访问接口 #

如果默认的嵌入式表单没有提供足够的访问权限，你可以自定义一个Stencil表单组件，在组件内部封装获取内部字段的方法，然后在ADF中直接调用这些方法。

步骤1：创建自定义Stencil表单组件 #

import { Component, h, State } from '@stencil/core';
import { FormState } from './form-state'; // 假设你有表单状态管理模块

@Component({
  tag: 'custom-embedded-form',
  shadow: true
})
export class CustomEmbeddedForm {
  @State() formState: FormState;

  // 暴露获取所有内部字段的方法
  getInternalFields() {
    return this.formState.fields;
  }

  // 暴露获取特定字段值的方法
  getFieldValue(fieldId: string) {
    const targetField = this.formState.fields.find(f => f.id === fieldId);
    return targetField ? targetField.value : null;
  }

  render() {
    // 渲染你的表单UI
    return <div class="embedded-form">{/* 表单元素渲染逻辑 */}</div>;
  }
}

步骤2：在ADF中调用自定义组件的方法 #

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

@Component({
  selector: 'app-custom-form',
  template: `
    <custom-embedded-form #embeddedFormRef></custom-embedded-form>
    <button (click)="fetchEmbeddedField()">获取嵌入式字段值</button>
  `
})
export class CustomFormComponent {
  @ViewChild('embeddedFormRef') embeddedFormRef: ElementRef;

  fetchEmbeddedField() {
    const customFormInstance = this.embeddedFormRef.nativeElement;
    const allInternalFields = customFormInstance.getInternalFields();
    const userPhoneValue = customFormInstance.getFieldValue('user_phone');
    
    console.log('所有内部字段:', allInternalFields);
    console.log('用户手机号:', userPhoneValue);
  }
}

方案3：监听表单值变化事件获取嵌入式字段数据 #

ADF的FormComponent会触发formValueChanged事件，这个事件的回调参数包含整个表单（包括嵌入式表单）的所有字段值。你可以通过监听这个事件来间接获取嵌入式字段的数据。

代码示例： #

import { Component, ViewChild } from '@angular/core';
import { FormComponent, FormValueChangedEvent } from '@alfresco/adf-core';

@Component({
  selector: 'app-custom-form',
  templateUrl: './custom-form.component.html'
})
export class CustomFormComponent {
  @ViewChild(FormComponent) formComponent: FormComponent;

  ngAfterViewInit() {
    this.formComponent.formValueChanged.subscribe((event: FormValueChangedEvent) => {
      // event.value包含全量表单值，嵌入式字段通常会带上父字段ID作为前缀
      const embeddedFieldPrefix = 'embedded_form_container.';
      
      // 提取所有嵌入式字段的值
      const embeddedValues = Object.keys(event.value)
        .filter(key => key.startsWith(embeddedFieldPrefix))
        .reduce((acc, key) => {
          const fieldName = key.replace(embeddedFieldPrefix, '');
          acc[fieldName] = event.value[key];
          return acc;
        }, {});

      console.log('嵌入式字段值集合:', embeddedValues);
      console.log('用户姓名:', embeddedValues['user_name']);
    });
  }
}

注意事项： #

• 嵌入式表单的字段ID在父表单的value中通常会带有父字段的ID作为前缀（比如parent_field.child_field），你需要根据实际的字段配置调整前缀规则。
• 确保已经正确完成Stencil表单在ADF中的嵌入配置，比如通过adf-form组件的formId属性加载表单，或者动态绑定表单定义。

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