@nocobase/client-v2 2.4.0-alpha.1 → 2.4.0-alpha.10

package/src/flow/models/fields/AssociationFieldModel/CascadeSelectFieldModel.tsx

@@ -25,6 +25,7 @@ import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable }
 import { CSS } from '@dnd-kit/utilities';
 import { AssociationFieldModel } from './AssociationFieldModel';
 import { transformNestedData } from '../ClickableFieldModel';
+import { syncQuickEditPreventClose } from '../../../internal/utils/quickEditViewContainer';
 
 type CascadeHydrateStatus = 'pending' | 'done';
 
@@ -373,7 +374,12 @@ export class CascadeSelectInnerFieldModel extends AssociationFieldModel {
     this.setProps({ onPopupScroll: fn });
   }
   set onDropdownVisibleChange(fn) {
-    this.setProps({ onDropdownVisibleChange: fn });
+    this.setProps({
+      onDropdownVisibleChange: (visible: boolean) => {
+        syncQuickEditPreventClose(this, visible);
+        fn(visible);
+      },
+    });
   }
   set onSearch(fn) {
     this.setProps({ onSearch: fn });

package/src/flow/models/fields/AssociationFieldModel/PopupSubTableFieldModel/PopupSubTableFieldModel.tsx

@@ -19,7 +19,7 @@ import {
   createCurrentRecordMetaFactory,
   useFlowModel,
 } from '@nocobase/flow-engine';
-import { Table, Button, Space } from 'antd';
+import { Table, Button, Space, theme } from 'antd';
 import { uid } from '@formily/shared';
 import classNames from 'classnames';
 import { DragEndEvent } from '@dnd-kit/core';
@@ -190,6 +190,7 @@ const AddFieldColumn = ({ model }) => {
 };
 
 const DisplayTable = (props) => {
+  const { token } = theme.useToken();
   const {
     pageSize,
     value,
@@ -269,7 +270,7 @@ const DisplayTable = (props) => {
           },
         },
         ...baseColumns,
-        { key: 'empty' },
+        { key: 'empty', render: () => <div style={{ minHeight: token.controlHeight }} /> },
       ].filter(Boolean),
     ) as any[];
 
@@ -283,7 +284,7 @@ const DisplayTable = (props) => {
     }
 
     return cols;
-  }, [baseColumns, enableIndexColumn, currentPage, currentPageSize, isConfigMode, model]);
+  }, [baseColumns, enableIndexColumn, currentPage, currentPageSize, isConfigMode, model, token.controlHeight]);
   return (
     <Table
       tableLayout="fixed"

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -41,6 +41,7 @@ import { BlockSceneEnum } from '../../base/BlockModel';
 import { ActionWithoutPermission } from '../../base/ActionModel';
 import { EditFormModel } from '../../blocks';
 import { hasAncestorModel } from './recordSelectSettingsUtils';
+import { syncQuickEditPreventClose } from '../../../internal/utils/quickEditViewContainer';
 
 function RemoteModelRenderer({ options }) {
   const ctx = useFlowViewContext();
@@ -65,6 +66,11 @@ function RemoteModelRenderer({ options }) {
 
 export function CreateContent({ model, toOne = false }) {
   const ctx = useFlowContext();
+  // Quick-create popups isolate business context but must retain the field's configuration mode.
+  ctx.defineProperty('flowSettingsEnabled', {
+    get: () => model.context.flowSettingsEnabled,
+    cache: false,
+  });
   const { Header, type } = ctx.view;
   model._closeView = ctx.view.close;
   return (
@@ -308,6 +314,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
             }
             setKeepOpenRuntime({ preventCloseOnSelect: false, open });
           }
+          syncQuickEditPreventClose(model, open);
           others.onDropdownVisibleChange?.(open);
         }}
         optionRender={({ data }) => {
@@ -874,6 +881,8 @@ RecordSelectFieldModel.registerFlow({
             dataSourceKey: ctx.collection.dataSourceKey,
             collectionName: ctx.collectionField?.target,
             ...(associationName && sourceId != null ? { associationName, sourceId } : {}),
+            // 上级记录暂无主键（如审批配置态表单）时不能传 associationName，否则弹窗内新建的区块会绑定到关联资源；改传 sourceAssociationName，仅用于展示“当前弹窗上级记录”变量
+            ...(associationName && sourceId == null ? { sourceAssociationName: associationName } : {}),
             collectionField: ctx.collectionField,
             openerUids,
             onChange: (e) => {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -209,7 +209,7 @@ function hasFormValueDrivenDataScopeField(fieldModel: any) {
 }
 
 const MemoFieldRenderer = React.memo(FieldModelRenderer, (prev, next) => {
-  return prev.value === next.value && prev.model === next.model;
+  return prev.value === next.value && prev.model === next.model && prev.disabled === next.disabled;
 });
 
 export function buildRowPathFromFieldIndex(fieldIndex: unknown): Array<string | number> | null {
@@ -345,11 +345,14 @@ interface CellProps {
   memoKey?: string;
   width?: number;
   commitOnChange?: boolean;
+  disabled?: boolean;
 }
 
 const MemoCell: React.FC<CellProps> = React.memo(
-  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange }) => {
+  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange, disabled }) => {
     const isNew = record?.__is_new__;
+    // 子表格整体被禁用时，列上的显示模式可能仍是“可编辑”，这里需要把父级的禁用状态一并合并进来，否则单元格仍可编辑。
+    const columnDisabled = disabled || parent.props.disabled;
     return (
       <div
         style={{
@@ -442,9 +445,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
               style={{ marginBottom: 0 }}
               showLabel={false}
               disabled={
-                parent.props.disabled ||
-                (!isNew && parent.props.aclDisabled) ||
-                (isNew && parent.props.aclCreateDisabled)
+                columnDisabled || (!isNew && parent.props.aclDisabled) || (isNew && parent.props.aclCreateDisabled)
               }
             >
               {fork.constructor.isLargeField ? (
@@ -456,9 +457,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
                   }}
                   defaultValue={value}
                   disabled={
-                    parent.props.disabled ||
-                    (!isNew && parent.props.aclDisabled) ||
-                    (isNew && parent.props.aclCreateDisabled)
+                    columnDisabled || (!isNew && parent.props.aclDisabled) || (isNew && parent.props.aclCreateDisabled)
                   }
                 />
               ) : (
@@ -481,7 +480,8 @@ const MemoCell: React.FC<CellProps> = React.memo(
       prev.memoKey === next.memoKey &&
       prev.width === next.width &&
       prev.commitOnChange === next.commitOnChange &&
-      prev.rowIdx === next.rowIdx
+      prev.rowIdx === next.rowIdx &&
+      prev.disabled === next.disabled
     );
   },
 );
@@ -620,6 +620,11 @@ export class SubTableColumnModel<
 
   onInit(options: any): void {
     super.onInit(options);
+    const resource = this.context.blockModel?.context?.resource;
+    const fieldPath = this.context.fieldPath;
+    if (resource?.addUpdateAssociationValues && fieldPath && this.collectionField?.isAssociationField?.()) {
+      resource.addUpdateAssociationValues(fieldPath);
+    }
     this.context.defineProperty('resourceName', {
       get: () => {
         return this.context.collectionField.collection.name;
@@ -740,7 +745,7 @@ export class SubTableColumnModel<
   }
   renderItem(): any {
     return (props) => {
-      const { value, id, rowIdx, record, parentFieldIndex, parentItem } = props || {};
+      const { value, id, rowIdx, record, parentFieldIndex, parentItem, disabled: subTableDisabled } = props || {};
       // 子表格列模型本身没有行级 fieldIndex，上下文中无法把 `roles.name` 解析成 `roles[0].name`，
       // 导致“默认值/赋值规则”在对多关系字段下无法生效。
       // 这里为每一行创建一个 column fork，并注入 fieldIndex，让规则引擎能够按行解析与写入。
@@ -754,6 +759,7 @@ export class SubTableColumnModel<
       const fieldModel: any = this.subModels.field;
       const cellModeKey = [
         rowForkKey,
+        subTableDisabled ? 'disabled' : 'enabled',
         this.props.pattern,
         this.props.readPretty,
         this.props.titleField,
@@ -828,6 +834,7 @@ export class SubTableColumnModel<
           parentItem={parentItem}
           rowFork={rowFork}
           memoKey={cellModeKey}
+          disabled={subTableDisabled}
           width={this.props.width}
           commitOnChange={this.hasFormulaColumn || this.hasFormValueDrivenDataScopeColumn}
         />

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -8,7 +8,7 @@
  */
 
 import { CloseOutlined, ZoomInOutlined } from '@ant-design/icons';
-import { Table, Form, Space, Button } from 'antd';
+import { Table, Form, Space, Button, theme } from 'antd';
 import { css } from '@emotion/css';
 import { useTranslation } from 'react-i18next';
 import { PlusOutlined } from '@ant-design/icons';
@@ -51,6 +51,7 @@ function shouldRefreshForChangedPaths(fieldPath: unknown, changedPaths: unknown)
 
 export function SubTableField(props) {
   const { t } = useTranslation();
+  const { token } = theme.useToken();
   const {
     onChange,
     columns,
@@ -180,6 +181,9 @@ export function SubTableField(props) {
         // the current array index so Form.Item can rebind after reordering/removal.
         const rowBindingKey = `${rowIdentity}:${pageRowIdx}`;
         const columnKey = col.dataIndex ?? col.key ?? 'cell';
+        if (col.key === '_empty') {
+          return <div style={{ minHeight: token.controlHeight }} />;
+        }
         if (!col.render) {
           return;
         }
@@ -188,6 +192,7 @@ export function SubTableField(props) {
           rowIdx: pageRowIdx,
           id: `field-${String(columnKey)}-${rowBindingKey}`,
           value: text,
+          disabled,
           parentFieldIndex,
           parentItem,
           onChange: (value) => {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableField.disabled.test.tsx

@@ -0,0 +1,90 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@nocobase/test/client';
+import { SubTableField } from '../SubTableField';
+
+vi.mock('react-i18next', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useTranslation: () => ({
+    t: (value: string) => value,
+  }),
+}));
+
+vi.mock('antd', async () => {
+  const actual = await vi.importActual<any>('antd');
+  return {
+    ...actual,
+    Table: ({ dataSource = [], columns = [] }: any) => (
+      <div data-testid="subtable">
+        <div data-testid="column-keys">{columns.map((column: any) => String(column.key)).join(',')}</div>
+        {dataSource.map((record: any, rowIdx: number) => (
+          <div data-testid={`row-${rowIdx}`} key={record.__index__ || rowIdx}>
+            {columns.map((column: any) => (
+              <div data-testid={`cell-${rowIdx}-${String(column.dataIndex || column.key)}`} key={column.key}>
+                {column.render?.(record[column.dataIndex], record, rowIdx)}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    ),
+  };
+});
+
+function renderSubTableField(disabled?: boolean) {
+  const renderArgs: any[] = [];
+  const columns = [
+    {
+      key: 'name',
+      dataIndex: 'name',
+      render: (args: any) => {
+        renderArgs.push(args);
+        return <span>{args.value || 'empty'}</span>;
+      },
+    },
+  ];
+
+  render(
+    <SubTableField
+      columns={columns}
+      disabled={disabled}
+      pageSize={10}
+      filterTargetKey="id"
+      fieldPathArray={['roles']}
+      getCurrentValue={() => [{ __index__: 'row-1', id: 1, name: 'admin' }]}
+    />,
+  );
+
+  return renderArgs;
+}
+
+describe('SubTableField disabled', () => {
+  it('passes the disabled state down to every column cell', () => {
+    const renderArgs = renderSubTableField(true);
+
+    expect(renderArgs).toHaveLength(1);
+    expect(renderArgs[0].disabled).toBe(true);
+  });
+
+  it('keeps cells editable when the sub-table is not disabled', () => {
+    const renderArgs = renderSubTableField(false);
+
+    expect(renderArgs).toHaveLength(1);
+    expect(renderArgs[0].disabled).toBe(false);
+  });
+
+  it('hides the remove column when the sub-table is disabled', () => {
+    renderSubTableField(true);
+
+    expect(screen.getByTestId('column-keys')).not.toHaveTextContent('delete');
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/__tests__/RecordSelectFieldModel.quickCreatePopup.test.tsx

@@ -0,0 +1,183 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import {
+  FlowContext,
+  FlowEngine,
+  FlowEngineProvider,
+  FlowViewContextProvider,
+  type FlowModel,
+} from '@nocobase/flow-engine';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import '../../../index';
+import { BlockGridModel } from '../../../base/BlockGridModel';
+import { RecordSelectFieldModel } from '../RecordSelectFieldModel';
+
+type OpenViewHandler = (ctx: unknown, params: Record<string, unknown>) => void;
+
+function getOpenViewHandler(): OpenViewHandler {
+  const flow = RecordSelectFieldModel.globalFlowRegistry.getFlow('popupSettings');
+  const handler = flow?.getStep('openView')?.serialize().handler;
+
+  if (!handler) {
+    throw new Error('popupSettings.openView handler is not registered');
+  }
+
+  return handler as OpenViewHandler;
+}
+
+function createContext(record: Record<string, unknown>) {
+  const open = vi.fn();
+  const sourceCollection = {
+    getFilterByTK: vi.fn((sourceRecord: Record<string, unknown>) => sourceRecord.id),
+  };
+  const model = {
+    uid: 'record-select-uid',
+    props: {
+      quickCreate: 'modalAdd',
+      allowMultiple: true,
+    },
+    context: {
+      inputArgs: {},
+      flowSettingsEnabled: false,
+    },
+    flowEngine: {
+      context: {
+        themeToken: {
+          colorBgLayout: '#fff',
+        },
+      },
+    },
+  };
+
+  return {
+    open,
+    context: {
+      inputArgs: { onChange: vi.fn() },
+      view: {
+        inputArgs: {
+          viewUid: 'approval-popup-uid',
+        },
+      },
+      viewer: { open },
+      layoutContentElement: {},
+      model,
+      collection: {
+        dataSourceKey: 'main',
+        filterTargetKey: 'id',
+      },
+      collectionField: {
+        type: 'hasMany',
+        target: 'orgs',
+        resourceName: 'users.orgs',
+        collection: sourceCollection,
+      },
+      record,
+    },
+  };
+}
+
+describe('RecordSelectFieldModel quick create popup', () => {
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  describe.each(['drawer', 'dialog'])('%s configuration mode', (mode) => {
+    it.each([
+      { scenario: 'configuration', modelEnabled: true, globalEnabled: false },
+      { scenario: 'global configuration', modelEnabled: true, globalEnabled: true },
+      { scenario: 'runtime', modelEnabled: false, globalEnabled: false },
+      { scenario: 'read-only configuration', modelEnabled: false, globalEnabled: true },
+    ])('uses the field configuration state in $scenario', async ({ modelEnabled, globalEnabled }) => {
+      const engine = new FlowEngine();
+      engine.registerModels({ BlockGridModel });
+      engine.flowSettings.enabled = globalEnabled;
+      engine.context.defineProperty('themeToken', {
+        value: { marginBlock: 16, marginSM: 8, paddingLG: 24 },
+      });
+      engine.context.defineProperty('t', { value: (key: string) => key });
+      const save = vi.fn(async (model: FlowModel) => model.serialize());
+      engine.setModelRepository({
+        findOne: vi.fn(async () => null),
+        save,
+        destroy: vi.fn(async () => true),
+        move: vi.fn(async () => undefined),
+        duplicate: vi.fn(async () => null),
+      });
+      const load = vi.spyOn(engine, 'loadOrCreateModel');
+      const { context, open } = createContext({});
+      context.model.context.flowSettingsEnabled = modelEnabled;
+      getOpenViewHandler()(context, { mode, size: 'medium' });
+      const config = open.mock.calls[0][0];
+      expect(config.inheritContext).toBe(false);
+
+      // Detached popups inherit the engine context, not the approval form's model context.
+      const popupContext = new FlowContext();
+      popupContext.addDelegate(engine.context);
+      popupContext.defineProperty('engine', { value: engine });
+      popupContext.defineProperty('view', {
+        value: { type: mode, inputArgs: config.inputArgs, Header: () => null, close: vi.fn() },
+      });
+      const { container } = render(
+        <FlowEngineProvider engine={engine}>
+          <FlowViewContextProvider context={popupContext}>{config.content()}</FlowViewContextProvider>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => expect(container.querySelector('.nb-block-grid')).toBeInTheDocument());
+      if (modelEnabled) {
+        expect(screen.getByRole('button', { name: /Add block/ })).toBeInTheDocument();
+        expect(save).toHaveBeenCalledOnce();
+      } else {
+        expect(screen.queryByRole('button', { name: /Add block/ })).not.toBeInTheDocument();
+        expect(save).not.toHaveBeenCalled();
+      }
+      expect(load).toHaveBeenCalledWith(
+        expect.objectContaining({ use: 'BlockGridModel', parentId: context.model.uid }),
+        { delegateToParent: false, delegate: popupContext, skipSave: !modelEnabled },
+      );
+      expect(engine.context.flowSettingsEnabled).toBe(globalEnabled);
+    });
+  });
+
+  it('passes the parent record reference when the parent record has a primary key', () => {
+    const { context, open } = createContext({ id: 1, nickname: 'Saved user' });
+
+    getOpenViewHandler()(context, { mode: 'drawer', size: 'medium' });
+
+    expect(open).toHaveBeenCalledOnce();
+    const { inputArgs } = open.mock.calls[0][0];
+    expect(inputArgs).toMatchObject({
+      scene: 'create',
+      collectionName: 'orgs',
+      associationName: 'users.orgs',
+      sourceId: 1,
+    });
+    expect(inputArgs).not.toHaveProperty('sourceAssociationName');
+  });
+
+  it('only passes sourceAssociationName when the parent record has no primary key yet', () => {
+    const { context, open } = createContext({});
+
+    getOpenViewHandler()(context, { mode: 'drawer', size: 'medium' });
+
+    expect(open).toHaveBeenCalledOnce();
+    const { inputArgs } = open.mock.calls[0][0];
+    expect(inputArgs).toMatchObject({
+      scene: 'create',
+      collectionName: 'orgs',
+      sourceAssociationName: 'users.orgs',
+    });
+    expect(inputArgs).not.toHaveProperty('associationName');
+    expect(inputArgs).not.toHaveProperty('sourceId');
+  });
+});

package/src/flow/models/fields/DisplayAssociationField/DisplaySubTableFieldModel.tsx

@@ -17,14 +17,16 @@ import {
   observer,
 } from '@nocobase/flow-engine';
 import { Table } from 'antd';
+import type { TableProps } from 'antd';
 import classNames from 'classnames';
 import { DragEndEvent } from '@dnd-kit/core';
 import { css } from '@emotion/css';
-import { isEmpty } from 'lodash';
+import { get, isEmpty, orderBy } from 'lodash';
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FieldModel } from '../../base';
 import { DetailsItemModel } from '../../blocks/details/DetailsItemModel';
+import { FormAssociationItemModel } from '../../blocks/form/FormAssociationItemModel';
 import { adjustColumnOrder } from '../../blocks/table/utils';
 
 const HeaderWrapperComponent = React.memo((props) => {
@@ -65,11 +67,31 @@ const AddFieldColumn = ({ model }) => {
 };
 
 const DisplayTable = (props) => {
-  const { pageSize, value, size, collection, baseColumns, enableIndexColumn = true, model } = props;
+  const { pageSize, value: rawValue, size, collection, baseColumns, enableIndexColumn = true, model } = props;
+  const isFormAssociation = model.parent instanceof FormAssociationItemModel;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const [localSort, setLocalSort] = useState<{ field: string; order: 'asc' | 'desc' }>();
   const { t } = useTranslation();
 
+  const value = useMemo(() => {
+    if (!isFormAssociation || Array.isArray(rawValue)) return rawValue;
+    if (rawValue && Array.isArray(rawValue.rows)) return rawValue.rows;
+    return rawValue && typeof rawValue === 'object' ? [rawValue] : [];
+  }, [isFormAssociation, rawValue]);
+
+  const sortedValue = useMemo(
+    () =>
+      isFormAssociation && localSort
+        ? orderBy(value, [(record) => get(record, localSort.field)], [localSort.order])
+        : value,
+    [isFormAssociation, localSort, value],
+  );
+
+  useEffect(() => {
+    if (isFormAssociation) setCurrentPage(1);
+  }, [isFormAssociation, rawValue]);
+
   useEffect(() => {
     setCurrentPageSize(pageSize);
   }, [pageSize]);
@@ -89,7 +111,7 @@ const DisplayTable = (props) => {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, value]);
+  }, [currentPage, currentPageSize, value, t]);
 
   const getColumns = () => {
     const cols = adjustColumnOrder(
@@ -119,8 +141,20 @@ const DisplayTable = (props) => {
     }
     return cols;
   };
-  const handleChange = useCallback(
-    async (pagination, filters, sorter) => {
+  const handleChange = useCallback<NonNullable<TableProps<Record<string, unknown>>['onChange']>>(
+    async (pagination, filters, sorters, extra) => {
+      const sorter = Array.isArray(sorters) ? sorters[0] : sorters;
+      if (isFormAssociation) {
+        if (extra.action !== 'sort') return;
+        const column = sorter?.column as { sortField?: string } | undefined;
+        const sortField = column?.sortField || sorter?.field;
+        const fullPath = Array.isArray(sortField) ? sortField.join('.') : String(sortField ?? '');
+        const prefix = `${model.context.fieldPath}.`;
+        const field = fullPath.startsWith(prefix) ? fullPath.slice(prefix.length) : fullPath;
+        setLocalSort(sorter?.order && field ? { field, order: sorter.order === 'ascend' ? 'asc' : 'desc' } : undefined);
+        setCurrentPage(1);
+        return;
+      }
       //支持列点击排序
       if (!isEmpty(sorter)) {
         const resource = model.context.blockModel.resource;
@@ -138,7 +172,7 @@ const DisplayTable = (props) => {
         await resource.refresh();
       }
     },
-    [model],
+    [isFormAssociation, model],
   );
 
   return (
@@ -147,7 +181,7 @@ const DisplayTable = (props) => {
       size={size}
       rowKey={collection.filterTargetKey}
       scroll={{ x: 'max-content' }}
-      dataSource={value}
+      dataSource={sortedValue}
       columns={getColumns()}
       pagination={pagination}
       onChange={handleChange}
@@ -269,3 +303,4 @@ DisplaySubTableFieldModel.define({
 });
 
 DetailsItemModel.bindModelToInterface('DisplaySubTableFieldModel', ['m2m', 'o2m', 'mbm']);
+FormAssociationItemModel.bindModelToInterface('DisplaySubTableFieldModel', ['m2m', 'o2m', 'mbm']);