fix(core): find schemas correctly

HyperLife1119 · HyperLife1119 · commit 43d7dc34820d · 2025-06-23T16:14:37.000+08:00
diff --git a/packages/core/src/lib/directives/render/form.directive.spec.ts b/packages/core/src/lib/directives/render/form.directive.spec.ts
@@ -15,8 +15,8 @@ import { FluentFormRenderModule } from './module';
     <div [fluentSchema]="schema()" [(fluentModel)]="model" (fluentFormChange)="form = $event">
       <fluent-outlet key="ipt" />
       <fluent-outlet key="ipts" />
-      <fluent-outlet key="group.ipt" />
-      <fluent-outlet key="group.ipts" />
+      <fluent-outlet [key]="['group', 'ipt']" />
+      <fluent-outlet [key]="['group', 'ipts']" />
       <fluent-outlet key="array" />
     </div>
   `
diff --git a/packages/core/src/lib/directives/render/outlet.directive.ts b/packages/core/src/lib/directives/render/outlet.directive.ts
@@ -1,7 +1,7 @@
 import { computed, Directive, effect, inject, input, ViewContainerRef } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import type { AnyArray, AnyObject } from '@ngify/core';
-import type { AbstractSchema, SingleSchemaKey } from '../../schemas';
+import type { AbstractSchema, SchemaKey, SingleSchemaKey } from '../../schemas';
 import { WidgetTemplateRegistry } from '../../services';
 import { SchemaUtil } from '../../utils';
 import type { WidgetTemplateContext } from '../../widgets';
@@ -22,14 +22,19 @@ export class FluentOutletDirective<T extends AnyObject | AnyArray> implements Wi
 
   private readonly _control = computed(() => {
     const form = this.controlContainer.form();
-    return form.get(this.key().toString()) ?? form;
+    const paths = this.schemaUtil.norimalizePaths(this.key());
+    return form.get(paths) ?? form;
   });
 
   private readonly _model = computed(() => {
     const rootModel = this.controlContainer.model();
-    const paths = this.schemaUtil.parsePathKey(this.key().toString());
+    const paths = this.schemaUtil.norimalizePaths(this.key());
     // Delete the last key to get the parent model
-    return paths.slice(0, -1).reduce((obj, key) => obj?.[key as keyof T] as T, rootModel);
+    return paths
+      .map(path => this.schemaUtil.parsePathKey(path))
+      .flat()
+      .slice(0, -1)
+      .reduce((obj, key) => obj?.[key as keyof T] as T, rootModel);
   });
 
   get control(): AbstractControl {
@@ -44,7 +49,7 @@ export class FluentOutletDirective<T extends AnyObject | AnyArray> implements Wi
     return this._model();
   }
 
-  readonly key = input.required<SingleSchemaKey>();
+  readonly key = input.required<SingleSchemaKey | SchemaKey[]>();
 
   constructor() {
     effect(() => {
diff --git a/packages/core/src/lib/testing/components/range/range.component.ts b/packages/core/src/lib/testing/components/range/range.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'fluent-range',
diff --git a/packages/core/src/lib/utils/schema.utils.spec.ts b/packages/core/src/lib/utils/schema.utils.spec.ts
@@ -170,17 +170,6 @@ describe('SchemaUtil', () => {
       expect(schemaUtil.find(schema(), 'name')).toEqual({ kind: 'text-field', key: 'name' });
     });
 
-    it('二级图示', () => {
-      const schema = form(() => {
-        group('group').schemas(() => {
-          textField('name');
-        });
-      });
-
-      expect(schemaUtil.find(schema(), ['group', 'name'])).toEqual({ kind: 'text-field', key: 'name' });
-      expect(schemaUtil.find(schema(), 'group.name')).toEqual({ kind: 'text-field', key: 'name' });
-    });
-
     it('多级图示', () => {
       const schema = form(() => {
         group('group').schemas(() => {
@@ -191,16 +180,23 @@ describe('SchemaUtil', () => {
       });
 
       expect(schemaUtil.find(schema(), ['group', 'group', 'name'])).toEqual({ kind: 'text-field', key: 'name' });
-      expect(schemaUtil.find(schema(), 'group.group.name')).toEqual({ kind: 'text-field', key: 'name' });
     });
 
-    it('多字段图示', () => {
+    it('multi key schema', () => {
       const schema = form(() => {
         range(['begin', 'end']);
       });
 
       expect(schemaUtil.find(schema(), [['begin', 'end']])).toEqual({ kind: 'range', key: ['begin', 'end'] });
-      expect(schemaUtil.find(schema(), ['begin', 'end'].toString())).toEqual({ kind: 'range', key: ['begin', 'end'] });
+      expect(schemaUtil.find(schema(), 'begin,end')).toEqual({ kind: 'range', key: ['begin', 'end'] });
+    });
+
+    it('object path key schema', () => {
+      const schema = form(() => {
+        textField('name.first');
+      });
+
+      expect(schemaUtil.find(schema(), 'name.first')).toEqual({ kind: 'text-field', key: 'name.first' });
     });
 
     it('不存在的图示', () => {
@@ -215,11 +211,31 @@ describe('SchemaUtil', () => {
         range(['begin', 'end']);
       });
 
-      expect(schemaUtil.find(schema(), null!)).toBe(null);
       expect(schemaUtil.find(schema(), [['begin', 'e']])).toBe(null);
       expect(schemaUtil.find(schema(), ['begin', 'e'].toString())).toBe(null);
     });
   });
+
+  describe('norimalizePaths', () => {
+    it('should normalize a single string key', () => {
+      expect(schemaUtil.norimalizePaths('name')).toEqual(['name']);
+      expect(schemaUtil.norimalizePaths(1)).toEqual(['1']);
+    });
+
+    it('should normalize a object path key', () => {
+      expect(schemaUtil.norimalizePaths('a.b')).toEqual(['a.b']);
+    });
+
+    it('should normalize a paths', () => {
+      expect(schemaUtil.norimalizePaths(['a', 'b'])).toEqual(['a', 'b']);
+      expect(schemaUtil.norimalizePaths([1, 2])).toEqual(['1', '2']);
+      expect(schemaUtil.norimalizePaths(['a', 1])).toEqual(['a', '1']);
+    });
+
+    it('should normalize an array with a nested array key', () => {
+      expect(schemaUtil.norimalizePaths([['a', 'b'], 'c', 1])).toEqual(['a,b', 'c', '1']);
+    });
+  });
 });
 
 describe('SchemaUtil with patcher feature', () => {
diff --git a/packages/core/src/lib/utils/schema.utils.ts b/packages/core/src/lib/utils/schema.utils.ts
@@ -152,26 +152,24 @@ export class SchemaUtil {
     return key.split('.');
   }
 
+  norimalizePaths(paths: SingleSchemaKey | SchemaKey[]) {
+    return (isArray(paths) ? paths : [paths]).map(o => o.toString());
+  }
+
   find(schema: Indexable<AbstractBranchSchema>, key: SingleSchemaKey): AbstractSchema | null;
   find(schema: Indexable<AbstractBranchSchema>, key: SchemaKey[]): AbstractSchema | null;
-  find(schema: Indexable<AbstractBranchSchema>, path: SingleSchemaKey | SchemaKey[]): AbstractSchema | null;
-  find(schema: Indexable<AbstractBranchSchema>, path?: SingleSchemaKey | SchemaKey[]): AbstractSchema | null {
-    if (!path) return null;
-
-    const paths = isArray(path)
-      ? path.map(o => isArray(o) ? o.toString() : o)
-      : path.toString().split('.');
-
-    let _schema: Indexable<AbstractSchema> | null = schema;
+  find(schema: Indexable<AbstractBranchSchema>, paths: SingleSchemaKey | SchemaKey[]): AbstractSchema | null;
+  find(schema: Indexable<AbstractBranchSchema>, paths: SingleSchemaKey | SchemaKey[]): AbstractSchema | null {
+    let currentSchema: Indexable<AbstractSchema> | null = schema;
 
-    for (const path of paths) {
-      _schema = _schema['schemas'].find((o: AbstractSchema) => o.key?.toString() === path) ?? null;
+    for (const path of this.norimalizePaths(paths)) {
+      currentSchema = currentSchema['schemas'].find((o: AbstractSchema) => o.key?.toString() === path) ?? null;
 
-      if (_schema === null) {
-        return _schema;
+      if (currentSchema === null) {
+        return currentSchema;
       }
     }
 
-    return _schema;
+    return currentSchema;
   }
 }
diff --git a/packages/docs/src/app/pages/advanced/customization/examples/custom-layout/custom-layout.component.html b/packages/docs/src/app/pages/advanced/customization/examples/custom-layout/custom-layout.component.html
@@ -17,7 +17,7 @@
           <fluent-outlet key="age" />
         </td>
         <td>
-          <fluent-outlet key="info.birthday" />
+          <fluent-outlet [key]="['info', 'birthday']" />
         </td>
         <td>
           <fluent-outlet key="enabled" />
