feat: Formly providers

meta-d · Feb 1, 2024 · 29437d9 · 29437d9
1 parent 1b6f253
commit 29437d9
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 91 deletions.
diff --git a/...loud/src/app/features/setting/notification-destination/notification-destination.module.ts b/...loud/src/app/features/setting/notification-destination/notification-destination.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { FormlyModule } from '@ngx-formly/core'
-import { FormlyMaterialModule } from '@ngx-formly/material'
 import { MaterialModule, SharedModule } from '../../../@shared'
 import { EditDestinationComponent } from './edit-destination/edit-destination.component'
 import { NewNotificationDestinationComponent } from './new-notification-destination/new-notification-destination.component'
@@ -12,7 +11,6 @@ import { NotificationDestinationsComponent } from './notification-destinations/n
     SharedModule,
     MaterialModule,
     FormlyModule,
-    FormlyMaterialModule,
     NotificationDestinationRoutingModule
   ],
   exports: [],

diff --git a/apps/cloud/src/app/features/story/story.module.ts b/apps/cloud/src/app/features/story/story.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgmDialogComponent } from '@metad/components/dialog'
-import { NgmFormlyModule } from '@metad/formly'
+import { NgmFormlyModule, provideFormly } from '@metad/formly'
 import { NgmCommonModule, NgmTableComponent, TreeTableModule } from '@metad/ocap-angular/common'
 import { NgmStoryModule, provideStorySettings } from '@metad/story'
 import { NgmFormlyChartPropertModule } from '@metad/story/widgets/analytical-card'
@@ -15,7 +15,6 @@ import { PACFormlyImageUploadComponent, PACFormlyWidgetDesignerComponent } from
 import { StoryRoutingModule } from './story-routing.module'
 import { STORY_DESIGNER_COMPONENTS } from './widgets'
 
-
 @NgModule({
   declarations: [],
   imports: [
@@ -31,18 +30,7 @@ import { STORY_DESIGNER_COMPONENTS } from './widgets'
     }),
 
     // Formly
-    NgmFormlyModule.forRoot({
-      types: [
-        {
-          name: 'styling',
-          component: PACFormlyWidgetDesignerComponent
-        },
-        {
-          name: 'image-upload',
-          component: PACFormlyImageUploadComponent
-        }
-      ]
-    }),
+    NgmFormlyModule,
     NgmFormlyChartPropertModule,
 
     NgmCommonModule,
@@ -61,6 +49,18 @@ import { STORY_DESIGNER_COMPONENTS } from './widgets'
     ...STORY_WIDGET_COMPONENTS,
     ...STORY_DESIGNER_COMPONENTS,
     provideStorySettings(),
+    provideFormly({
+      types: [
+        {
+          name: 'styling',
+          component: PACFormlyWidgetDesignerComponent
+        },
+        {
+          name: 'image-upload',
+          component: PACFormlyImageUploadComponent
+        }
+      ]
+    })
   ]
 })
 export class PACStoryModule {}
diff --git a/libs/formly/src/lib/formly.module.ts b/libs/formly/src/lib/formly.module.ts
@@ -1,12 +1,14 @@
 import { CommonModule } from '@angular/common'
-import { ModuleWithProviders, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
+import { MetadFormlyPanelModule } from '@metad/formly-mat/panel'
+import { MetadFormlyMatTabGroupModule } from '@metad/formly-mat/tab-group'
 import { NgmFormlyAccordionModule } from '@metad/formly/accordion'
+import { NgmFormlyArrayModule } from '@metad/formly/array'
 import { PACFormlyButtonToggleModule } from '@metad/formly/button-toggle'
 import { PACFormlyChartTypeModule } from '@metad/formly/chart-type'
 import { NgmFormlyMatCheckboxModule } from '@metad/formly/checkbox'
 import { PACFormlyCodeEditorModule } from '@metad/formly/code-editor'
 import { PACFormlyColorPickerModule } from '@metad/formly/color-picker'
-import { PacFormlyColorsComponent } from '@metad/formly/colors'
 import { PACFormlyDesignerModule } from '@metad/formly/designer'
 import { PACFormlyEmptyModule } from '@metad/formly/empty'
 import { PACFormlyEntityTypeModule } from '@metad/formly/entity-type'
@@ -20,26 +22,6 @@ import { PACFormlyMatSlicersModule } from '@metad/formly/slicers'
 import { FormlyMatSliderModule } from '@metad/formly/slider'
 import { PACFormlySortModule } from '@metad/formly/sort'
 import { PACFormlyTextAreaModule } from '@metad/formly/textarea'
-import { NgmFormlyArrayModule } from '@metad/formly/array'
-import { ConfigOption, FormlyFieldConfig, FormlyModule } from '@ngx-formly/core'
-import { MetadFormlyPanelModule } from '@metad/formly-mat/panel'
-import { MetadFormlyMatTabGroupModule } from '@metad/formly-mat/tab-group'
-
-export function validateRequired(err, field: FormlyFieldConfig) {
-  return `This field is required`
-}
-export function validateMinLength(err, field: FormlyFieldConfig) {
-  return `Should have atleast ${field.props.minLength} characters`
-}
-export function validateMaxLength(err, field: FormlyFieldConfig) {
-  return `Should have less than ${field.props.maxLength} characters`
-}
-export function validateMin(err, field: FormlyFieldConfig) {
-  return 'This value should be more than ' + field.props.min
-}
-export function validateMax(err, field: FormlyFieldConfig) {
-  return `This value should be less than ${field.props.max}`
-}
 
 @NgModule({
   declarations: [],
@@ -70,55 +52,4 @@ export function validateMax(err, field: FormlyFieldConfig) {
     NgmFormlyAccordionModule
   ]
 })
-export class NgmFormlyModule {
-  /**
-   * @deprecated use provideFormly()
-   * 
-   * @param options 
-   * @returns 
-   */
-  static forRoot(options?: ConfigOption): ModuleWithProviders<NgmFormlyModule> {
-    return {
-      ngModule: NgmFormlyModule,
-      providers: [
-        ...FormlyModule.forRoot({
-          validationMessages: [
-            { name: 'required', message: validateRequired },
-            { name: 'minLength', message: validateMinLength },
-            { name: 'maxLength', message: validateMaxLength },
-            { name: 'min', message: validateMin },
-            { name: 'max', message: validateMax },
-            ...(options?.validationMessages ?? [])
-          ],
-          types: [
-            {
-              name: 'colors',
-              component: PacFormlyColorsComponent
-            },
-            ...(options?.types ?? [])
-          ]
-        }).providers
-      ]
-    }
-  }
-}
-
-export function provideFormly(options?: ConfigOption) {
-  return FormlyModule.forRoot({
-    validationMessages: [
-      { name: 'required', message: validateRequired },
-      { name: 'minLength', message: validateMinLength },
-      { name: 'maxLength', message: validateMaxLength },
-      { name: 'min', message: validateMin },
-      { name: 'max', message: validateMax },
-      ...(options?.validationMessages ?? [])
-    ],
-    types: [
-      {
-        name: 'colors',
-        component: PacFormlyColorsComponent
-      },
-      ...(options?.types ?? [])
-    ]
-  }).providers
-}
+export class NgmFormlyModule {}
diff --git a/libs/formly/src/lib/providers.ts b/libs/formly/src/lib/providers.ts
@@ -0,0 +1,53 @@
+import { PacFormlyColorsComponent } from '@metad/formly/colors'
+import { ConfigOption, FormlyFieldConfig, FormlyModule } from '@ngx-formly/core'
+import { FormlyFieldTextArea } from '@ngx-formly/material/textarea'
+
+export function validateRequired(err, field: FormlyFieldConfig) {
+  return `This field is required`
+}
+export function validateMinLength(err, field: FormlyFieldConfig) {
+  return `Should have atleast ${field.props.minLength} characters`
+}
+export function validateMaxLength(err, field: FormlyFieldConfig) {
+  return `Should have less than ${field.props.maxLength} characters`
+}
+export function validateMin(err, field: FormlyFieldConfig) {
+  return 'This value should be more than ' + field.props.min
+}
+export function validateMax(err, field: FormlyFieldConfig) {
+  return `This value should be less than ${field.props.max}`
+}
+
+export function provideFormly(options?: ConfigOption) {
+  return FormlyModule.forRoot({
+    validationMessages: [
+      { name: 'required', message: validateRequired },
+      { name: 'minLength', message: validateMinLength },
+      { name: 'maxLength', message: validateMaxLength },
+      { name: 'min', message: validateMin },
+      { name: 'max', message: validateMax },
+      ...(options?.validationMessages ?? [])
+    ],
+    types: [
+      {
+        name: 'colors',
+        component: PacFormlyColorsComponent
+      },
+      ...(options?.types ?? [])
+    ]
+  }).providers
+}
+
+export function provideFormlyMaterial() {
+  return [
+    ...FormlyModule.forChild({
+      types: [
+        {
+          name: 'textarea',
+          component: FormlyFieldTextArea,
+          wrappers: ['form-field']
+        }
+      ]
+    }).providers
+  ]
+}
diff --git a/libs/formly/src/public-api.ts b/libs/formly/src/public-api.ts
@@ -3,4 +3,5 @@
  */
 
 export * from './lib/formly.module'
-export * from './lib/types'
+export * from './lib/types'
+export * from './lib/providers'