0
# JSON Schema Integration
1

2
JSON Schema support for automatic form generation from schema definitions, enabling rapid form creation from standardized JSON schemas.
3

4
## Capabilities
5

6
### FormlyJsonschema Service
7

8
Injectable service for converting JSON Schema definitions into Formly field configurations.
9

10
```typescript { .api }
11
/**
12
 * Service for converting JSON Schema to Formly field configurations
13
 */
14
@Injectable({ providedIn: 'root' })
15
export class FormlyJsonschema {
16
  /**
17
   * Convert a JSON Schema definition to a Formly field configuration
18
   * @param schema - The JSON Schema definition (draft 7)
19
   * @param options - Optional conversion options
20
   * @returns FormlyFieldConfig matching the schema structure
21
   */
22
  toFieldConfig(schema: JSONSchema7, options?: FormlyJsonschemaOptions): FormlyFieldConfig;
23
}
24
```
25

26
**Usage Examples:**
27

28
```typescript
29
import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
30
import { JSONSchema7 } from 'json-schema';
31

32
// Basic schema conversion
33
const schema: JSONSchema7 = {
34
  type: 'object',
35
  properties: {
36
    firstName: {
37
      type: 'string',
38
      title: 'First Name',
39
      minLength: 2
40
    },
41
    lastName: {
42
      type: 'string',
43
      title: 'Last Name',
44
      minLength: 2
45
    },
46
    email: {
47
      type: 'string',
48
      format: 'email',
49
      title: 'Email Address'
50
    },
51
    age: {
52
      type: 'number',
53
      minimum: 18,
54
      maximum: 100,
55
      title: 'Age'
56
    }
57
  },
58
  required: ['firstName', 'lastName', 'email']
59
};
60

61
@Component({
62
  template: `
63
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
64
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
65
      <button type="submit">Submit</button>
66
    </form>
67
  `
68
})
69
export class JsonSchemaFormComponent {
70
  form = new FormGroup({});
71
  model = {};
72
  fields: FormlyFieldConfig[];
73

74
  constructor(private formlyJsonschema: FormlyJsonschema) {
75
    this.fields = [this.formlyJsonschema.toFieldConfig(schema)];
76
  }
77

78
  onSubmit() {
79
    console.log(this.model);
80
  }
81
}
82
```
83

84
### Advanced Schema Conversion
85

86
```typescript
87
// Complex nested schema
88
const complexSchema: JSONSchema7 = {
89
  type: 'object',
90
  properties: {
91
    personalInfo: {
92
      type: 'object',
93
      title: 'Personal Information',
94
      properties: {
95
        name: { type: 'string', title: 'Full Name' },
96
        birthDate: { type: 'string', format: 'date', title: 'Birth Date' }
97
      }
98
    },
99
    skills: {
100
      type: 'array',
101
      title: 'Skills',
102
      items: {
103
        type: 'object',
104
        properties: {
105
          name: { type: 'string', title: 'Skill Name' },
106
          level: {
107
            type: 'string',
108
            enum: ['Beginner', 'Intermediate', 'Advanced'],
109
            title: 'Skill Level'
110
          }
111
        }
112
      }
113
    },
114
    preferences: {
115
      type: 'object',
116
      title: 'Preferences',
117
      properties: {
118
        theme: {
119
          type: 'string',
120
          enum: ['light', 'dark'],
121
          title: 'Theme'
122
        },
123
        notifications: {
124
          type: 'boolean',
125
          title: 'Enable Notifications'
126
        }
127
      }
128
    }
129
  }
130
};
131

132
// Convert with custom mapping options
133
const fieldConfig = this.formlyJsonschema.toFieldConfig(complexSchema, {
134
  map: (mappedField: FormlyFieldConfig, mapSource: JSONSchema7) => {
135
    // Customize field types based on schema properties
136
    if (mapSource.format === 'date') {
137
      mappedField.type = 'datepicker';
138
    }
139
    
140
    if (mapSource.enum) {
141
      mappedField.type = 'select';
142
      mappedField.props = {
143
        ...mappedField.props,
144
        options: mapSource.enum.map(value => ({
145
          label: value.toString(),
146
          value: value
147
        }))
148
      };
149
    }
150
    
151
    return mappedField;
152
  }
153
});
154
```
155

156
## Types
157

158
### Configuration Types
159

160
```typescript { .api }
161
interface FormlyJsonschemaOptions {
162
  /**
163
   * Custom mapping function to transform generated field configurations
164
   * @param mappedField - The generated field configuration
165
   * @param mapSource - The source JSON schema that generated this field
166
   * @returns Modified field configuration
167
   */
168
  map?: (mappedField: FormlyFieldConfig, mapSource: JSONSchema7) => FormlyFieldConfig;
169
  
170
  /**
171
   * Enable strict mode for schema validation
172
   * When true, throws errors for unsupported schema features
173
   */
174
  strict?: boolean;
175
}
176
```
177

178
### Schema Mapping Types
179

180
```typescript { .api }
181
/**
182
 * Supported JSON Schema formats that map to specific field types
183
 */
184
type SupportedSchemaFormats = 
185
  | 'date'
186
  | 'date-time'
187
  | 'time'
188
  | 'email'
189
  | 'uri'
190
  | 'hostname'
191
  | 'ipv4'
192
  | 'ipv6';
193

194
/**
195
 * JSON Schema types that are supported for conversion
196
 */
197
type SupportedSchemaTypes = 
198
  | 'string'
199
  | 'number'
200
  | 'integer'
201
  | 'boolean'
202
  | 'array'
203
  | 'object'
204
  | 'null';
205

206
/**
207
 * Schema properties that affect field generation
208
 */
209
interface SchemaFieldProperties {
210
  /** Schema type */
211
  type: SupportedSchemaTypes;
212
  
213
  /** Field title (becomes label) */
214
  title?: string;
215
  
216
  /** Field description */
217
  description?: string;
218
  
219
  /** Default value */
220
  default?: any;
221
  
222
  /** Enumerated values for select fields */
223
  enum?: any[];
224
  
225
  /** String format specification */
226
  format?: SupportedSchemaFormats;
227
  
228
  /** Minimum value for numbers */
229
  minimum?: number;
230
  
231
  /** Maximum value for numbers */
232
  maximum?: number;
233
  
234
  /** Minimum string length */
235
  minLength?: number;
236
  
237
  /** Maximum string length */
238
  maxLength?: number;
239
  
240
  /** Regular expression pattern */
241
  pattern?: string;
242
  
243
  /** Required fields (for object schemas) */
244
  required?: string[];
245
  
246
  /** Object properties */
247
  properties?: { [key: string]: JSONSchema7 };
248
  
249
  /** Array item schema */
250
  items?: JSONSchema7;
251
  
252
  /** Minimum array length */
253
  minItems?: number;
254
  
255
  /** Maximum array length */
256
  maxItems?: number;
257
}
258
```
259

260
## Import
261

262
```typescript
263
import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
264
```
265

266
## Module Setup
267

268
The JSON Schema functionality is included in the core module:
269

270
```typescript
271
import { FormlyModule } from '@ngx-formly/core';
272

273
@NgModule({
274
  imports: [
275
    FormlyModule.forRoot()
276
  ]
277
})
278
export class AppModule {}
279
```
280

281
For standalone components:
282

283
```typescript
284
import { provideFormlyCore } from '@ngx-formly/core';
285

286
bootstrapApplication(AppComponent, {
287
  providers: [
288
    provideFormlyCore()
289
  ]
290
});
291
```