0
# Field Components
1

2
Core Angular components for rendering dynamic forms with comprehensive field configuration support and reactive form integration.
3

4
## Capabilities
5

6
### FormlyForm
7

8
Main component for rendering complete dynamic forms with automatic field generation and form control binding.
9

10
```typescript { .api }
11
/**
12
 * Main component for rendering dynamic forms from field configurations
13
 */
14
@Component({
15
  selector: 'formly-form',
16
  template: `<formly-field *ngFor="let field of fields" [field]="field"></formly-field>`
17
})
18
export class FormlyForm implements DoCheck, OnChanges, OnDestroy {
19
  /** The Angular FormGroup or UntypedFormGroup to bind form controls to */
20
  @Input() form: FormGroup | UntypedFormGroup;
21
  
22
  /** Array of field configurations defining the form structure */
23
  @Input() fields: FormlyFieldConfig[];
24
  
25
  /** The data model bound to the form fields */
26
  @Input() model: any;
27
  
28
  /** Additional options for form behavior and lifecycle hooks */
29
  @Input() options: FormlyFormOptions;
30
  
31
  /** Event emitted when model data changes */
32
  @Output() modelChange: EventEmitter<any>;
33
}
34
```
35

36
**Usage Example:**
37

38
```typescript
39
import { Component } from '@angular/core';
40
import { FormGroup } from '@angular/forms';
41
import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
42

43
@Component({
44
  template: `
45
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
46
      <formly-form 
47
        [form]="form" 
48
        [fields]="fields" 
49
        [model]="model"
50
        [options]="options">
51
      </formly-form>
52
      <button type="submit" [disabled]="!form.valid">Submit</button>
53
    </form>
54
  `
55
})
56
export class MyFormComponent {
57
  form = new FormGroup({});
58
  model = { firstName: '', lastName: '', email: '' };
59
  options: FormlyFormOptions = {};
60
  
61
  fields: FormlyFieldConfig[] = [
62
    {
63
      key: 'firstName',
64
      type: 'input',
65
      props: {
66
        label: 'First Name',
67
        required: true,
68
      },
69
    },
70
    {
71
      key: 'lastName',
72
      type: 'input',
73
      props: {
74
        label: 'Last Name',
75
        required: true,
76
      },
77
    },
78
    {
79
      key: 'email',
80
      type: 'input',
81
      props: {
82
        label: 'Email',
83
        type: 'email',
84
        required: true,
85
      },
86
    },
87
  ];
88

89
  onSubmit() {
90
    if (this.form.valid) {
91
      console.log('Form Data:', this.model);
92
    }
93
  }
94
}
95
```
96

97
### FormlyField
98

99
Individual field component for rendering single form fields with wrapper and validation support.
100

101
```typescript { .api }
102
/**
103
 * Component for rendering individual form fields with support for wrappers and validation
104
 */
105
@Component({
106
  selector: 'formly-field',
107
  template: `<ng-container #fieldComponent></ng-container>`
108
})
109
export class FormlyField implements OnInit, OnChanges, DoCheck, OnDestroy {
110
  /** The field configuration object */
111
  @Input() field: FormlyFieldConfig;
112
}
113
```
114

115
**Usage Example:**
116

117
```typescript
118
@Component({
119
  template: `
120
    <formly-field [field]="fieldConfig"></formly-field>
121
  `
122
})
123
export class SingleFieldComponent {
124
  fieldConfig: FormlyFieldConfig = {
125
    key: 'username',
126
    type: 'input',
127
    formControl: new FormControl(''),
128
    props: {
129
      label: 'Username',
130
      placeholder: 'Enter username',
131
      required: true,
132
    },
133
  };
134
}
135
```
136

137
### Legacy Components
138

139
Legacy versions of form components for backward compatibility.
140

141
```typescript { .api }
142
/**
143
 * Legacy version of FormlyForm for backward compatibility
144
 * @deprecated Use FormlyForm instead
145
 */
146
@Component({ selector: 'formly-form' })
147
export class LegacyFormlyForm extends FormlyForm {}
148

149
/**
150
 * Legacy version of FormlyField for backward compatibility  
151
 * @deprecated Use FormlyField instead
152
 */
153
@Component({ selector: 'formly-field' })
154
export class LegacyFormlyField extends FormlyField {}
155
```
156

157
### FormlyTemplate
158

159
Internal template component used by the form rendering system.
160

161
```typescript { .api }
162
/**
163
 * Internal template component used by the form rendering system
164
 * Generally not used directly by applications
165
 */
166
@Component({
167
  selector: 'formly-template'
168
})
169
export class FormlyTemplate {
170
  /** The field configuration */
171
  @Input() field: FormlyFieldConfig;
172
}
173
```
174

175
## Types
176

177
### Component-Related Types
178

179
```typescript { .api }
180
interface FormlyFormOptions {
181
  /** Shared state object accessible to all fields */
182
  formState?: any;
183
  
184
  /** Subject for listening to field value changes */
185
  fieldChanges?: Subject<FormlyValueChangeEvent>;
186
  
187
  /** Function to transform fields before rendering */
188
  fieldTransform?: (
189
    fields: FormlyFieldConfig[], 
190
    model: any, 
191
    form: FormGroup | UntypedFormGroup, 
192
    options: FormlyFormOptions
193
  ) => FormlyFieldConfig[];
194
  
195
  /** Custom function to determine when to show field errors */
196
  showError?: (field: FormlyFieldConfig) => boolean;
197
  
198
  /** Whether to reset field values when fields are hidden */
199
  resetOnHide?: boolean;
200
  
201
  /** Parent form directive for nested forms */
202
  parentForm?: FormGroupDirective | null;
203
  
204
  /** Function to update initial values */
205
  updateInitialValue?: () => void;
206
  
207
  /** Function to check field expressions */
208
  checkExpressions?: (field: FormlyFieldConfig, ignoreCache?: boolean) => void;
209
  
210
  /** Function to trigger change detection */
211
  detectChanges?: (field: FormlyFieldConfig) => void;
212
  
213
  /** Function to build field configurations */
214
  build?: (field?: FormlyFieldConfig) => FormlyFieldConfig[];
215
  
216
  // Internal properties
217
  _resolver?: ComponentFactoryResolver;
218
  _viewContainerRef?: ViewContainerRef;
219
  _markForCheck?: (field: FormlyFieldConfig) => void;
220
  _hiddenFieldsForCheck?: FormlyFieldConfig[];
221
  _initialModel?: any;
222
}
223

224
interface FormlyValueChangeEvent {
225
  /** The field that triggered the change */
226
  field: FormlyFieldConfig;
227
  
228
  /** The field type */
229
  type: string;
230
  
231
  /** The new value */
232
  value: any;
233
}
234

235
interface FormlyHookConfig {
236
  /** Called after field initialization */
237
  onInit?: (field: FormlyFieldConfig) => void;
238
  
239
  /** Called after field changes */
240
  afterContentInit?: (field: FormlyFieldConfig) => void;
241
  
242
  /** Called after view initialization */
243
  afterViewInit?: (field: FormlyFieldConfig) => void;
244
  
245
  /** Called on field destruction */
246
  onDestroy?: (field: FormlyFieldConfig) => void;
247
}
248
```
249

250
### Field Expression Types
251

252
```typescript { .api }
253
type FieldExpression<T = any> = string | ((field: FormlyFieldConfig) => T) | Observable<T>;
254

255
interface FieldExpressions {
256
  [property: string]: FieldExpression;
257
  
258
  /** Expression for CSS class names */
259
  className?: FieldExpression<string>;
260
  
261
  /** Expression for hiding the field */
262
  hide?: FieldExpression<boolean>;
263
  
264
  /** Expression for disabling the field */
265
  'props.disabled'?: FieldExpression<boolean>;
266
  
267
  /** Expression for making the field required */
268
  'props.required'?: FieldExpression<boolean>;
269
}
270
```