JSON Schema Integration

/**
 * Service for converting JSON Schema to Formly field configurations
 */
@Injectable({ providedIn: 'root' })
export class FormlyJsonschema {
  /**
   * Convert a JSON Schema definition to a Formly field configuration
   * @param schema - The JSON Schema definition (draft 7)
   * @param options - Optional conversion options
   * @returns FormlyFieldConfig matching the schema structure
   */
  toFieldConfig(schema: JSONSchema7, options?: FormlyJsonschemaOptions): FormlyFieldConfig;
}

import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
import { JSONSchema7 } from 'json-schema';

// Basic schema conversion
const schema: JSONSchema7 = {
  type: 'object',
  properties: {
    firstName: {
      type: 'string',
      title: 'First Name',
      minLength: 2
    },
    lastName: {
      type: 'string',
      title: 'Last Name',
      minLength: 2
    },
    email: {
      type: 'string',
      format: 'email',
      title: 'Email Address'
    },
    age: {
      type: 'number',
      minimum: 18,
      maximum: 100,
      title: 'Age'
    }
  },
  required: ['firstName', 'lastName', 'email']
};

@Component({
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
      <button type="submit">Submit</button>
    </form>
  `
})
export class JsonSchemaFormComponent {
  form = new FormGroup({});
  model = {};
  fields: FormlyFieldConfig[];

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

  onSubmit() {
    console.log(this.model);
  }
}

// Complex nested schema
const complexSchema: JSONSchema7 = {
  type: 'object',
  properties: {
    personalInfo: {
      type: 'object',
      title: 'Personal Information',
      properties: {
        name: { type: 'string', title: 'Full Name' },
        birthDate: { type: 'string', format: 'date', title: 'Birth Date' }
      }
    },
    skills: {
      type: 'array',
      title: 'Skills',
      items: {
        type: 'object',
        properties: {
          name: { type: 'string', title: 'Skill Name' },
          level: {
            type: 'string',
            enum: ['Beginner', 'Intermediate', 'Advanced'],
            title: 'Skill Level'
          }
        }
      }
    },
    preferences: {
      type: 'object',
      title: 'Preferences',
      properties: {
        theme: {
          type: 'string',
          enum: ['light', 'dark'],
          title: 'Theme'
        },
        notifications: {
          type: 'boolean',
          title: 'Enable Notifications'
        }
      }
    }
  }
};

// Convert with custom mapping options
const fieldConfig = this.formlyJsonschema.toFieldConfig(complexSchema, {
  map: (mappedField: FormlyFieldConfig, mapSource: JSONSchema7) => {
    // Customize field types based on schema properties
    if (mapSource.format === 'date') {
      mappedField.type = 'datepicker';
    }
    
    if (mapSource.enum) {
      mappedField.type = 'select';
      mappedField.props = {
        ...mappedField.props,
        options: mapSource.enum.map(value => ({
          label: value.toString(),
          value: value
        }))
      };
    }
    
    return mappedField;
  }
});

interface FormlyJsonschemaOptions {
  /**
   * Custom mapping function to transform generated field configurations
   * @param mappedField - The generated field configuration
   * @param mapSource - The source JSON schema that generated this field
   * @returns Modified field configuration
   */
  map?: (mappedField: FormlyFieldConfig, mapSource: JSONSchema7) => FormlyFieldConfig;
  
  /**
   * Enable strict mode for schema validation
   * When true, throws errors for unsupported schema features
   */
  strict?: boolean;
}

/**
 * Supported JSON Schema formats that map to specific field types
 */
type SupportedSchemaFormats = 
  | 'date'
  | 'date-time'
  | 'time'
  | 'email'
  | 'uri'
  | 'hostname'
  | 'ipv4'
  | 'ipv6';

/**
 * JSON Schema types that are supported for conversion
 */
type SupportedSchemaTypes = 
  | 'string'
  | 'number'
  | 'integer'
  | 'boolean'
  | 'array'
  | 'object'
  | 'null';

/**
 * Schema properties that affect field generation
 */
interface SchemaFieldProperties {
  /** Schema type */
  type: SupportedSchemaTypes;
  
  /** Field title (becomes label) */
  title?: string;
  
  /** Field description */
  description?: string;
  
  /** Default value */
  default?: any;
  
  /** Enumerated values for select fields */
  enum?: any[];
  
  /** String format specification */
  format?: SupportedSchemaFormats;
  
  /** Minimum value for numbers */
  minimum?: number;
  
  /** Maximum value for numbers */
  maximum?: number;
  
  /** Minimum string length */
  minLength?: number;
  
  /** Maximum string length */
  maxLength?: number;
  
  /** Regular expression pattern */
  pattern?: string;
  
  /** Required fields (for object schemas) */
  required?: string[];
  
  /** Object properties */
  properties?: { [key: string]: JSONSchema7 };
  
  /** Array item schema */
  items?: JSONSchema7;
  
  /** Minimum array length */
  minItems?: number;
  
  /** Maximum array length */
  maxItems?: number;
}

import { FormlyJsonschema } from '@ngx-formly/core/json-schema';

import { FormlyModule } from '@ngx-formly/core';

@NgModule({
  imports: [
    FormlyModule.forRoot()
  ]
})
export class AppModule {}

import { provideFormlyCore } from '@ngx-formly/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideFormlyCore()
  ]
});