feat(form): add provideSFConfig

packages/form/public_api.ts

@@ -1 +1 @@
-export * from './src/form';
+export * from './src/index';

packages/form/spec/base.spec.ts

@@ -9,6 +9,7 @@ import { AlainThemeModule } from '@delon/theme';
 import { deepCopy, deepGet } from '@delon/util/other';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+import { SFWidgetProvideConfig, provideSFConfig } from '../src';
 import { SF_SEQ } from '../src/const';
 import { SFButton } from '../src/interface';
 import { FormProperty } from '../src/model/form.property';
@@ -73,17 +74,12 @@ export function builder(options?: {
   };
 }
 
-export function configureSFTestSuite(options?: { imports?: NzSafeAny[] }): void {
+export function configureSFTestSuite(options?: { imports?: NzSafeAny[]; widgets?: SFWidgetProvideConfig[] }): void {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        NoopAnimationsModule,
-        AlainThemeModule,
-        DelonFormModule.forRoot(),
-        HttpClientTestingModule,
-        ...(options?.imports ?? [])
-      ],
-      declarations: [TestFormComponent]
+      imports: [NoopAnimationsModule, AlainThemeModule, HttpClientTestingModule, ...(options?.imports ?? [])],
+      declarations: [TestFormComponent],
+      providers: [provideSFConfig({ widgets: options?.widgets })]
     });
   });
 }

packages/form/src/form.ts → packages/form/src/index.ts

@@ -16,6 +16,7 @@ export * from './model/index';
 export * from './widget';
 export * from './widgets/index';
 export * from './widget.factory';
+export * from './provide';
 
 // other
 export * from './validator.factory';

packages/form/src/provide.ts

@@ -0,0 +1,45 @@
+import {
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentProviders,
+  NgZone,
+  Provider,
+  inject,
+  makeEnvironmentProviders
+} from '@angular/core';
+
+import { AlainConfigService } from '@delon/util/config';
+import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+import { AjvSchemaValidatorFactory, SchemaValidatorFactory } from './validator.factory';
+import { WidgetRegistry } from './widget.factory';
+import { NzWidgetRegistry } from './widgets/nz-widget.registry';
+
+export interface SFWidgetProvideConfig {
+  KEY: string;
+  type: NzSafeAny;
+}
+
+/**
+ * Just only using Standalone widgets
+ */
+export function provideSFConfig(options?: { widgets?: SFWidgetProvideConfig[] }): EnvironmentProviders {
+  const provides: Array<Provider | EnvironmentProviders> = [
+    {
+      provide: SchemaValidatorFactory,
+      useClass: AjvSchemaValidatorFactory,
+      deps: [AlainConfigService, NgZone]
+    },
+    { provide: WidgetRegistry, useClass: NzWidgetRegistry }
+  ];
+  if (options?.widgets) {
+    provides.push({
+      provide: ENVIRONMENT_INITIALIZER,
+      multi: true,
+      useValue: () => {
+        const srv = inject(WidgetRegistry);
+        options?.widgets?.forEach(widget => srv.register(widget.KEY, widget.type));
+      }
+    });
+  }
+  return makeEnvironmentProviders(provides);
+}

packages/form/widgets/autocomplete/index.ts

@@ -1,22 +1,10 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { DelonFormModule, WidgetRegistry } from '@delon/form';
-import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
-import { NzInputModule } from 'ng-zorro-antd/input';
+import type { SFWidgetProvideConfig } from '@delon/form';
 
 import { AutoCompleteWidget } from './widget';
 
 export * from './widget';
 export * from './schema';
 
-@NgModule({
-  imports: [FormsModule, DelonFormModule, CommonModule, NzInputModule, NzAutocompleteModule],
-  declarations: [AutoCompleteWidget]
-})
-export class AutoCompleteWidgetModule {
-  constructor(widgetRegistry: WidgetRegistry) {
-    widgetRegistry.register(AutoCompleteWidget.KEY, AutoCompleteWidget);
-  }
+export function withAutoComplete(): SFWidgetProvideConfig {
+  return { KEY: AutoCompleteWidget.KEY, type: AutoCompleteWidget };
 }

packages/form/widgets/autocomplete/widget.spec.ts

@@ -7,7 +7,7 @@ import { createTestContext } from '@delon/testing';
 import { AlainConfigService } from '@delon/util/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { AutoCompleteWidgetModule } from './index';
+import { withAutoComplete } from './index';
 import { SFAutoCompleteWidgetSchema } from './schema';
 import { AutoCompleteWidget } from './widget';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
@@ -19,7 +19,7 @@ describe('form: widget: autocomplete', () => {
   let page: SFPage;
   const widget = 'autocomplete';
 
-  configureSFTestSuite({ imports: [AutoCompleteWidgetModule] });
+  configureSFTestSuite({ widgets: [withAutoComplete()] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));

packages/form/widgets/autocomplete/widget.ts

@@ -1,10 +1,12 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NgModel } from '@angular/forms';
+import { FormsModule, NgModel } from '@angular/forms';
 import { Observable, of, debounceTime, map, mergeMap, startWith, takeUntil } from 'rxjs';
 
-import { ControlUIWidget, SFSchemaEnum, SFValue, getCopyEnum, getEnum, toBool } from '@delon/form';
-import { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete';
+import { ControlUIWidget, DelonFormModule, SFSchemaEnum, SFValue, getCopyEnum, getEnum, toBool } from '@delon/form';
+import { NzAutocompleteModule, NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 import type { SFAutoCompleteWidgetSchema } from './schema';
 
@@ -41,11 +43,15 @@ import type { SFAutoCompleteWidgetSchema } from './schema';
       [compareWith]="i.compareWith"
       (selectionChange)="updateValue($event)"
     >
-      <nz-auto-option *ngFor="let i of list | async" [nzValue]="i" [nzLabel]="i.label"> {{ i.label }} </nz-auto-option>
+      @for (i of list | async; track i) {
+      <nz-auto-option [nzValue]="i" [nzLabel]="i.label"> {{ i.label }} </nz-auto-option>
+      }
     </nz-autocomplete>
   </sf-item-wrap>`,
   preserveWhitespaces: false,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [AsyncPipe, FormsModule, DelonFormModule, NzInputModule, NzAutocompleteModule]
 })
 export class AutoCompleteWidget extends ControlUIWidget<SFAutoCompleteWidgetSchema> {
   static readonly KEY = 'autocomplete';

packages/form/widgets/cascader/index.ts

@@ -1,20 +1,10 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { DelonFormModule, WidgetRegistry } from '@delon/form';
-import { NzCascaderModule } from 'ng-zorro-antd/cascader';
+import type { SFWidgetProvideConfig } from '@delon/form';
 
 import { CascaderWidget } from './widget';
 
 export * from './widget';
 export * from './schema';
 
-@NgModule({
-  imports: [FormsModule, DelonFormModule, NzCascaderModule],
-  declarations: [CascaderWidget]
-})
-export class CascaderWidgetModule {
-  constructor(widgetRegistry: WidgetRegistry) {
-    widgetRegistry.register(CascaderWidget.KEY, CascaderWidget);
-  }
+export function withCascader(): SFWidgetProvideConfig {
+  return { KEY: CascaderWidget.KEY, type: CascaderWidget };
 }

packages/form/widgets/cascader/widget.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 
 import { createTestContext } from '@delon/testing';
 
-import { CascaderWidgetModule } from './index';
+import { withCascader } from './index';
 import { CascaderWidget } from './widget';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
@@ -14,7 +14,7 @@ describe('form: widget: cascader', () => {
   let page: SFPage;
   const widget = 'cascader';
 
-  configureSFTestSuite({ imports: [CascaderWidgetModule] });
+  configureSFTestSuite({ widgets: [withCascader()] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));

packages/form/widgets/cascader/widget.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { ControlUIWidget, SFSchemaEnum, SFValue, getData, toBool } from '@delon/form';
-import { NzCascaderOption } from 'ng-zorro-antd/cascader';
+import { ControlUIWidget, DelonFormModule, SFSchemaEnum, SFValue, getData, toBool } from '@delon/form';
+import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import type { SFCascaderWidgetSchema } from './schema';
@@ -44,7 +45,9 @@ import type { SFCascaderWidgetSchema } from './schema';
     />
   </sf-item-wrap>`,
   preserveWhitespaces: false,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [FormsModule, DelonFormModule, NzCascaderModule]
 })
 export class CascaderWidget extends ControlUIWidget<SFCascaderWidgetSchema> implements OnInit {
   static readonly KEY = 'cascader';

src/app/app.config.ts

@@ -23,6 +23,9 @@ import { provideTinymce } from 'ngx-tinymce';
 
 import { provideCellWidgets } from '@delon/abc/cell';
 import { provideSTWidgets } from '@delon/abc/st';
+import { provideSFConfig } from '@delon/form';
+import { withAutoComplete } from '@delon/form/widgets/autocomplete';
+import { withCascader } from '@delon/form/widgets/cascader';
 import { mockInterceptor, provideDelonMockConfig } from '@delon/mock';
 import { ALAIN_I18N_TOKEN, provideAlain } from '@delon/theme';
 import { AlainConfig } from '@delon/util/config';
@@ -112,6 +115,9 @@ export const appConfig: ApplicationConfig = {
     }),
     provideCellWidgets(...CELL_WIDGETS),
     provideSTWidgets(...ST_WIDGETS),
+    provideSFConfig({
+      widgets: [withAutoComplete(), withCascader()]
+    }),
     importProvidersFrom(
       JsonSchemaModule,
       ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

src/app/shared/json-schema/json-schema.module.ts

@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
 
 import { DelonFormModule } from '@delon/form';
-import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete';
-import { CascaderWidgetModule } from '@delon/form/widgets/cascader';
 import { ColorWidgetModule } from '@delon/form/widgets/color';
 import { MentionWidgetModule } from '@delon/form/widgets/mention';
 import { QrCodeWidgetModule } from '@delon/form/widgets/qr-code';
@@ -20,8 +18,6 @@ import { TinymceWidgetModule } from '@delon/form/widgets-third/tinymce';
 @NgModule({
   imports: [
     DelonFormModule.forRoot(),
-    AutoCompleteWidgetModule,
-    CascaderWidgetModule,
     TransferWidgetModule,
     MentionWidgetModule,
     RateWidgetModule,