0
# Configuration & Module Setup
1

2
Configuration and module setup functionality for integrating NGX-Formly into Angular applications, supporting both module-based and standalone component approaches.
3

4
## Capabilities
5

6
### FormlyModule
7

8
Angular module providing form functionality and configuration for module-based applications.
9

10
```typescript { .api }
11
/**
12
 * Main NgModule for integrating Formly into Angular applications
13
 */
14
@NgModule()
15
export class FormlyModule {
16
  /**
17
   * Configure Formly for the root module with global configuration
18
   * @param config - Optional configuration options for field types, validators, etc.
19
   * @returns Module with providers configured for root
20
   */
21
  static forRoot(config?: ConfigOption): ModuleWithProviders<FormlyModule>;
22
  
23
  /**
24
   * Configure Formly for feature modules with additional configuration
25
   * @param config - Optional configuration options for field types, validators, etc.
26
   * @returns Module with providers configured for child modules
27
   */
28
  static forChild(config?: ConfigOption): ModuleWithProviders<FormlyModule>;
29
}
30
```
31

32
**Usage Example:**
33

34
```typescript
35
import { NgModule } from '@angular/core';
36
import { ReactiveFormsModule } from '@angular/forms';
37
import { FormlyModule } from '@ngx-formly/core';
38

39
@NgModule({
40
  imports: [
41
    ReactiveFormsModule,
42
    FormlyModule.forRoot({
43
      types: [
44
        { name: 'input', component: FormlyFieldInput },
45
        { name: 'textarea', component: FormlyFieldTextarea },
46
      ],
47
      validators: [
48
        { name: 'email', validation: emailValidator },
49
      ],
50
    }),
51
  ],
52
})
53
export class AppModule {}
54
```
55

56
### Standalone Component Configuration
57

58
Provider functions for configuring Formly in standalone component applications.
59

60
```typescript { .api }
61
/**
62
 * Provides Formly core functionality for standalone components
63
 * @param configs - Configuration options or array of configuration options
64
 * @returns Provider array for dependency injection
65
 */
66
function provideFormlyCore(configs?: ConfigOption | ConfigOption[]): Provider;
67

68
/**
69
 * Provides additional Formly configuration for standalone components
70
 * @param configs - Configuration options or array of configuration options
71
 * @returns Provider array for dependency injection
72
 */
73
function provideFormlyConfig(configs?: ConfigOption | ConfigOption[]): Provider;
74
```
75

76
**Usage Example:**
77

78
```typescript
79
import { bootstrapApplication } from '@angular/platform-browser';
80
import { provideFormlyCore } from '@ngx-formly/core';
81
import { AppComponent } from './app/app.component';
82

83
bootstrapApplication(AppComponent, {
84
  providers: [
85
    provideFormlyCore({
86
      types: [
87
        { name: 'input', component: FormlyFieldInput },
88
      ],
89
      validators: [
90
        { name: 'required', validation: Validators.required },
91
      ],
92
    }),
93
  ],
94
});
95
```
96

97
### Configuration Helper Functions
98

99
Utility functions for creating and managing configuration options.
100

101
```typescript { .api }
102
/**
103
 * Creates configuration option with default Formly configuration
104
 * @param config - FormlyConfig instance with default settings
105
 * @returns ConfigOption for use with forRoot/forChild or providers
106
 */
107
function withDefaultConfig(config: FormlyConfig): ConfigOption;
108
```
109

110
### Configuration Injection Token
111

112
Injection token for providing additional configuration options to Formly.
113

114
```typescript { .api }
115
/**
116
 * Injection token for registering additional Formly configuration options
117
 * Used internally by the configuration system
118
 */
119
const FORMLY_CONFIG: InjectionToken<ConfigOption[]>;
120
```
121

122
**Usage Example:**
123

124
```typescript
125
import { InjectionToken } from '@angular/core';
126
import { FORMLY_CONFIG } from '@ngx-formly/core';
127

128
const customConfig: ConfigOption = {
129
  types: [
130
    { name: 'custom-input', component: CustomInputComponent },
131
  ],
132
};
133

134
@NgModule({
135
  providers: [
136
    { provide: FORMLY_CONFIG, useValue: customConfig, multi: true },
137
  ],
138
})
139
export class FeatureModule {}
140
```
141

142
## Types
143

144
### Configuration Types
145

146
```typescript { .api }
147
interface ConfigOption {
148
  /** Field type configurations */
149
  types?: FieldTypeConfig[];
150
  /** Wrapper configurations */
151
  wrappers?: WrapperOption[];
152
  /** Validator configurations */
153
  validators?: ValidatorOption[];
154
  /** Extension configurations */
155
  extensions?: FormlyExtension[];
156
  /** Validation message configurations */
157
  validationMessages?: ValidationMessageOption[];
158
  /** Extra configuration options */
159
  extras?: FormlyConfig['extras'];
160
  /** Preset configurations */
161
  presets?: PresetOption[];
162
}
163

164
interface FieldTypeConfig {
165
  /** Unique name for the field type */
166
  name: string;
167
  /** Component class for rendering the field */
168
  component?: Type<FieldType>;
169
  /** Default wrappers to apply */
170
  wrappers?: string[];
171
  /** Default properties */
172
  defaultOptions?: FormlyFieldConfig;
173
  /** Extends an existing field type */
174
  extends?: string;
175
}
176

177
interface WrapperOption {
178
  /** Unique name for the wrapper */
179
  name: string;
180
  /** Component class for the wrapper */
181
  component: Type<FieldWrapper>;
182
  /** Field types this wrapper applies to */
183
  types?: string[];
184
}
185

186
interface ValidatorOption {
187
  /** Unique name for the validator */
188
  name: string;
189
  /** Validator function (sync or async) */
190
  validation: ValidatorFn | AsyncValidatorFn;
191
  /** Additional options for the validator */
192
  options?: { [id: string]: any };
193
}
194

195
interface ValidationMessageOption {
196
  /** Validator name this message applies to */
197
  name: string;
198
  /** Message string or function returning message */
199
  message: string | ((error: any, field: FormlyFieldConfig) => string);
200
}
201

202
interface PresetOption {
203
  /** Unique name for the preset */
204
  name: string;
205
  /** Configuration to apply when preset is used */
206
  config: FormlyFieldConfig;
207
}
208

209
interface FormlyExtension {
210
  /** Unique name for the extension */
211
  name?: string;
212
  /** Priority for extension execution order */
213
  priority?: number;
214
  /** Called before field creation */
215
  prePopulate?: (field: FormlyFieldConfig) => void;
216
  /** Called after field creation */
217
  onPopulate?: (field: FormlyFieldConfig) => void;
218
  /** Called after form creation */
219
  postPopulate?: (field: FormlyFieldConfig) => void;
220
}
221
```