Field Components

/**
 * Main component for rendering dynamic forms from field configurations
 */
@Component({
  selector: 'formly-form',
  template: `<formly-field *ngFor="let field of fields" [field]="field"></formly-field>`
})
export class FormlyForm implements DoCheck, OnChanges, OnDestroy {
  /** The Angular FormGroup or UntypedFormGroup to bind form controls to */
  @Input() form: FormGroup | UntypedFormGroup;
  
  /** Array of field configurations defining the form structure */
  @Input() fields: FormlyFieldConfig[];
  
  /** The data model bound to the form fields */
  @Input() model: any;
  
  /** Additional options for form behavior and lifecycle hooks */
  @Input() options: FormlyFormOptions;
  
  /** Event emitted when model data changes */
  @Output() modelChange: EventEmitter<any>;
}

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';

@Component({
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <formly-form 
        [form]="form" 
        [fields]="fields" 
        [model]="model"
        [options]="options">
      </formly-form>
      <button type="submit" [disabled]="!form.valid">Submit</button>
    </form>
  `
})
export class MyFormComponent {
  form = new FormGroup({});
  model = { firstName: '', lastName: '', email: '' };
  options: FormlyFormOptions = {};
  
  fields: FormlyFieldConfig[] = [
    {
      key: 'firstName',
      type: 'input',
      props: {
        label: 'First Name',
        required: true,
      },
    },
    {
      key: 'lastName',
      type: 'input',
      props: {
        label: 'Last Name',
        required: true,
      },
    },
    {
      key: 'email',
      type: 'input',
      props: {
        label: 'Email',
        type: 'email',
        required: true,
      },
    },
  ];

  onSubmit() {
    if (this.form.valid) {
      console.log('Form Data:', this.model);
    }
  }
}

/**
 * Component for rendering individual form fields with support for wrappers and validation
 */
@Component({
  selector: 'formly-field',
  template: `<ng-container #fieldComponent></ng-container>`
})
export class FormlyField implements OnInit, OnChanges, DoCheck, OnDestroy {
  /** The field configuration object */
  @Input() field: FormlyFieldConfig;
}

@Component({
  template: `
    <formly-field [field]="fieldConfig"></formly-field>
  `
})
export class SingleFieldComponent {
  fieldConfig: FormlyFieldConfig = {
    key: 'username',
    type: 'input',
    formControl: new FormControl(''),
    props: {
      label: 'Username',
      placeholder: 'Enter username',
      required: true,
    },
  };
}

/**
 * Legacy version of FormlyForm for backward compatibility
 * @deprecated Use FormlyForm instead
 */
@Component({ selector: 'formly-form' })
export class LegacyFormlyForm extends FormlyForm {}

/**
 * Legacy version of FormlyField for backward compatibility  
 * @deprecated Use FormlyField instead
 */
@Component({ selector: 'formly-field' })
export class LegacyFormlyField extends FormlyField {}

/**
 * Internal template component used by the form rendering system
 * Generally not used directly by applications
 */
@Component({
  selector: 'formly-template'
})
export class FormlyTemplate {
  /** The field configuration */
  @Input() field: FormlyFieldConfig;
}

interface FormlyFormOptions {
  /** Shared state object accessible to all fields */
  formState?: any;
  
  /** Subject for listening to field value changes */
  fieldChanges?: Subject<FormlyValueChangeEvent>;
  
  /** Function to transform fields before rendering */
  fieldTransform?: (
    fields: FormlyFieldConfig[], 
    model: any, 
    form: FormGroup | UntypedFormGroup, 
    options: FormlyFormOptions
  ) => FormlyFieldConfig[];
  
  /** Custom function to determine when to show field errors */
  showError?: (field: FormlyFieldConfig) => boolean;
  
  /** Whether to reset field values when fields are hidden */
  resetOnHide?: boolean;
  
  /** Parent form directive for nested forms */
  parentForm?: FormGroupDirective | null;
  
  /** Function to update initial values */
  updateInitialValue?: () => void;
  
  /** Function to check field expressions */
  checkExpressions?: (field: FormlyFieldConfig, ignoreCache?: boolean) => void;
  
  /** Function to trigger change detection */
  detectChanges?: (field: FormlyFieldConfig) => void;
  
  /** Function to build field configurations */
  build?: (field?: FormlyFieldConfig) => FormlyFieldConfig[];
  
  // Internal properties
  _resolver?: ComponentFactoryResolver;
  _viewContainerRef?: ViewContainerRef;
  _markForCheck?: (field: FormlyFieldConfig) => void;
  _hiddenFieldsForCheck?: FormlyFieldConfig[];
  _initialModel?: any;
}

interface FormlyValueChangeEvent {
  /** The field that triggered the change */
  field: FormlyFieldConfig;
  
  /** The field type */
  type: string;
  
  /** The new value */
  value: any;
}

interface FormlyHookConfig {
  /** Called after field initialization */
  onInit?: (field: FormlyFieldConfig) => void;
  
  /** Called after field changes */
  afterContentInit?: (field: FormlyFieldConfig) => void;
  
  /** Called after view initialization */
  afterViewInit?: (field: FormlyFieldConfig) => void;
  
  /** Called on field destruction */
  onDestroy?: (field: FormlyFieldConfig) => void;
}

type FieldExpression<T = any> = string | ((field: FormlyFieldConfig) => T) | Observable<T>;

interface FieldExpressions {
  [property: string]: FieldExpression;
  
  /** Expression for CSS class names */
  className?: FieldExpression<string>;
  
  /** Expression for hiding the field */
  hide?: FieldExpression<boolean>;
  
  /** Expression for disabling the field */
  'props.disabled'?: FieldExpression<boolean>;
  
  /** Expression for making the field required */
  'props.required'?: FieldExpression<boolean>;
}