Formularios dinámicos

Arquitectura de formularios dinámicos

Los formularios dinámicos representan uno de los patrones más versátiles en Angular para crear interfaces adaptables que se generan en tiempo de ejecución basándose en configuraciones externas. Esta aproximación permite desarrollar sistemas escalables donde la estructura del formulario no está hardcodeada, sino que se define mediante metadatos configurables.

La arquitectura de un sistema de formularios dinámicos se construye sobre varios componentes fundamentales que trabajan de forma cohesionada. En el centro encontramos el motor de configuración, responsable de interpretar los metadatos que definen la estructura del formulario, seguido del generador de controles que transforma estas definiciones en instancias de FormControl, FormGroup y FormArray.

Definición de la estructura de configuración

La base de cualquier sistema dinámico reside en una interfaz de configuración bien diseñada. Esta estructura debe ser suficientemente flexible para soportar diferentes tipos de campos mientras mantiene la tipificación estricta de TypeScript:

interface FormFieldConfig {
  key: string;
  type: 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'textarea' | 'group' | 'array';
  label: string;
  value?: any;
  required?: boolean;
  disabled?: boolean;
  validators?: ValidatorConfig[];
  options?: SelectOption[];
  children?: FormFieldConfig[];
  cssClass?: string;
  placeholder?: string;
  order?: number;
}

interface ValidatorConfig {
  type: 'required' | 'minLength' | 'maxLength' | 'email' | 'pattern' | 'custom';
  value?: any;
  message?: string;
}

interface FormConfig {
  title: string;
  fields: FormFieldConfig[];
  submitButton?: ButtonConfig;
  resetButton?: ButtonConfig;
}

Esta estructura permite definir formularios complejos de manera declarativa, incluyendo validaciones configurables y metadatos de presentación. La propiedad order facilita el ordenamiento dinámico de campos, mientras que children soporta formularios anidados.

Servicio generador de formularios

El corazón del sistema es un servicio dedicado que interpreta la configuración y genera los controles reactivos correspondientes:

@Injectable({
  providedIn: 'root'
})
export class DynamicFormService {
  private fb = inject(FormBuilder);

  generateForm(config: FormConfig): FormGroup {
    const controls: Record<string, AbstractControl> = {};
    
    // Ordenar campos por prioridad
    const sortedFields = config.fields.sort((a, b) => 
      (a.order || 0) - (b.order || 0)
    );

    for (const field of sortedFields) {
      controls[field.key] = this.createControl(field);
    }

    return this.fb.group(controls);
  }

  private createControl(field: FormFieldConfig): AbstractControl {
    switch (field.type) {
      case 'group':
        return this.createGroup(field);
      case 'array':
        return this.createArray(field);
      default:
        return this.createFormControl(field);
    }
  }

  private createFormControl(field: FormFieldConfig): FormControl {
    const validators = this.buildValidators(field.validators || []);
    
    return this.fb.control({
      value: field.value || null,
      disabled: field.disabled || false
    }, validators);
  }

  private createGroup(field: FormFieldConfig): FormGroup {
    const controls: Record<string, AbstractControl> = {};
    
    for (const child of field.children || []) {
      controls[child.key] = this.createControl(child);
    }
    
    return this.fb.group(controls);
  }

  private createArray(field: FormFieldConfig): FormArray {
    const controls = (field.value || []).map((item: any) => 
      this.createFormControl({
        ...field.children?.[0] || {},
        value: item
      })
    );
    
    return this.fb.array(controls);
  }
}

Este servicio implementa un patrón factory que abstrae la complejidad de crear diferentes tipos de controles, permitiendo extensibilidad para nuevos tipos de campos sin modificar el código existente.

Sistema de validadores configurables

Para mantener la flexibilidad, los validadores deben ser configurables y extensibles. Un servicio especializado maneja esta responsabilidad:

@Injectable({
  providedIn: 'root'
})
export class DynamicValidatorService {
  buildValidators(configs: ValidatorConfig[]): ValidatorFn[] {
    return configs.map(config => this.createValidator(config));
  }

  private createValidator(config: ValidatorConfig): ValidatorFn {
    switch (config.type) {
      case 'required':
        return Validators.required;
      case 'minLength':
        return Validators.minLength(config.value);
      case 'maxLength':
        return Validators.maxLength(config.value);
      case 'email':
        return Validators.email;
      case 'pattern':
        return Validators.pattern(config.value);
      case 'custom':
        return this.getCustomValidator(config.value);
      default:
        throw new Error(`Unknown validator type: ${config.type}`);
    }
  }

  private getCustomValidator(validatorName: string): ValidatorFn {
    // Registry pattern para validadores personalizados
    const customValidators: Record<string, ValidatorFn> = {
      strongPassword: this.strongPasswordValidator(),
      uniqueUsername: this.uniqueUsernameValidator(),
      // Agregar más validadores según necesidad
    };

    return customValidators[validatorName] || Validators.nullValidator;
  }
}

Arquitectura de componentes

La separación de responsabilidades es crucial en formularios dinámicos. Un componente contenedor orquesta la lógica, mientras que componentes específicos renderizan cada tipo de campo:

@Component({
  selector: 'app-dynamic-form',
  standalone: true,
  imports: [ReactiveFormsModule, DynamicFieldComponent],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <h2>{{ config?.title }}</h2>
      
      @for (field of sortedFields; track field.key) {
        <app-dynamic-field
          [field]="field"
          [form]="form">
        </app-dynamic-field>
      }
      
      <div class="form-actions">
        @if (config?.submitButton?.visible !== false) {
          <button type="submit" [disabled]="form.invalid">
            {{ config?.submitButton?.text || 'Enviar' }}
          </button>
        }
        
        @if (config?.resetButton?.visible) {
          <button type="button" (click)="onReset()">
            {{ config?.resetButton?.text || 'Limpiar' }}
          </button>
        }
      </div>
    </form>
  `
})
export class DynamicFormComponent {
  @Input() config: FormConfig | null = null;
  @Output() formSubmit = new EventEmitter<any>();
  @Output() formReset = new EventEmitter<void>();

  form: FormGroup = new FormGroup({});
  sortedFields: FormFieldConfig[] = [];

  private dynamicFormService = inject(DynamicFormService);

  ngOnChanges() {
    if (this.config) {
      this.form = this.dynamicFormService.generateForm(this.config);
      this.sortedFields = this.config.fields.sort((a, b) => 
        (a.order || 0) - (b.order || 0)
      );
    }
  }

  onSubmit() {
    if (this.form.valid) {
      this.formSubmit.emit(this.form.value);
    }
  }

  onReset() {
    this.form.reset();
    this.formReset.emit();
  }
}

Patrones de extensibilidad

Una arquitectura robusta debe permitir extensiones sin modificación. El patrón registry facilita agregar nuevos tipos de campos:

@Injectable({
  providedIn: 'root'
})
export class FieldTypeRegistry {
  private fieldTypes = new Map<string, Type<any>>();

  register(type: string, component: Type<any>) {
    this.fieldTypes.set(type, component);
  }

  get(type: string): Type<any> | undefined {
    return this.fieldTypes.get(type);
  }

  getAllTypes(): string[] {
    return Array.from(this.fieldTypes.keys());
  }
}

// Registro de tipos estándar
export function registerDefaultFieldTypes(registry: FieldTypeRegistry) {
  registry.register('text', TextFieldComponent);
  registry.register('email', EmailFieldComponent);
  registry.register('select', SelectFieldComponent);
  registry.register('checkbox', CheckboxFieldComponent);
  // Agregar más tipos según necesidad
}

Esta arquitectura modular permite a los desarrolladores extender el sistema agregando nuevos tipos de campos sin modificar el código base, manteniendo el principio abierto/cerrado y facilitando el mantenimiento a largo plazo.

Gestión de estado y configuraciones

Para aplicaciones empresariales, es fundamental implementar un sistema de gestión de configuraciones que permita cargar formularios desde diferentes fuentes:

@Injectable({
  providedIn: 'root'
})
export class FormConfigService {
  private http = inject(HttpClient);
  private configCache = new Map<string, FormConfig>();

  loadConfig(configId: string): Observable<FormConfig> {
    if (this.configCache.has(configId)) {
      return of(this.configCache.get(configId)!);
    }

    return this.http.get<FormConfig>(`/api/form-configs/${configId}`)
      .pipe(
        tap(config => this.configCache.set(configId, config)),
        catchError(error => {
          console.error('Error loading form config:', error);
          return throwError(() => error);
        })
      );
  }

  saveConfig(configId: string, config: FormConfig): Observable<void> {
    return this.http.put<void>(`/api/form-configs/${configId}`, config)
      .pipe(
        tap(() => this.configCache.set(configId, config))
      );
  }
}

Esta arquitectura establece las bases sólidas para crear sistemas de formularios altamente flexibles que pueden adaptarse a múltiples escenarios empresariales, desde encuestas simples hasta formularios de configuración complejos con cientos de campos interdependientes.

Renderizado condicional y formularios adaptativos

Los formularios adaptativos van más allá de la generación dinámica básica, implementando lógica de renderizado que responde a las interacciones del usuario en tiempo real. Esta capacidad permite crear experiencias fluidas donde los campos aparecen, desaparecen o cambian sus propiedades según los valores ingresados en otros campos del formulario.

Configuración de dependencias entre campos

Para implementar renderizado condicional, necesitamos extender nuestra configuración de campos con metadatos que definan las dependencias y condiciones de visibilidad:

interface ConditionalRule {
  field: string;
  operator: 'equals' | 'notEquals' | 'contains' | 'greaterThan' | 'lessThan' | 'in' | 'notIn';
  value: any;
  logicalOperator?: 'AND' | 'OR';
}

interface FormFieldConfig {
  key: string;
  type: string;
  label: string;
  value?: any;
  // Configuración de visibilidad condicional
  visible?: boolean;
  visibilityRules?: ConditionalRule[];
  // Configuración de habilitación condicional
  enabled?: boolean;
  enabledRules?: ConditionalRule[];
  // Validadores condicionales
  conditionalValidators?: {
    rules: ConditionalRule[];
    validators: ValidatorConfig[];
  }[];
  // Propiedades dinámicas
  dynamicProperties?: {
    property: 'placeholder' | 'label' | 'options' | 'cssClass';
    rules: ConditionalRule[];
    value: any;
  }[];
}

Esta estructura permite definir múltiples tipos de condicionalidad: visibilidad, habilitación, validadores dinámicos y propiedades que cambian según el contexto del formulario.

Motor de evaluación de condiciones

El núcleo de los formularios adaptativos es un motor de evaluación que interpreta las reglas y determina el estado actual de cada campo:

@Injectable({
  providedIn: 'root'
})
export class ConditionalLogicService {
  
  evaluateConditions(rules: ConditionalRule[], formValue: any): boolean {
    if (!rules.length) return true;

    return this.processLogicalGroups(rules, formValue);
  }

  private processLogicalGroups(rules: ConditionalRule[], formValue: any): boolean {
    const groups: ConditionalRule[][] = [];
    let currentGroup: ConditionalRule[] = [];

    // Agrupar reglas por operador lógico
    for (const rule of rules) {
      if (rule.logicalOperator === 'OR' && currentGroup.length > 0) {
        groups.push([...currentGroup]);
        currentGroup = [rule];
      } else {
        currentGroup.push(rule);
      }
    }
    
    if (currentGroup.length > 0) {
      groups.push(currentGroup);
    }

    // Evaluar grupos con OR entre ellos
    return groups.some(group => this.evaluateGroup(group, formValue));
  }

  private evaluateGroup(rules: ConditionalRule[], formValue: any): boolean {
    // Evaluar reglas dentro del grupo con AND
    return rules.every(rule => this.evaluateRule(rule, formValue));
  }

  private evaluateRule(rule: ConditionalRule, formValue: any): boolean {
    const fieldValue = this.getNestedValue(formValue, rule.field);
    
    switch (rule.operator) {
      case 'equals':
        return fieldValue === rule.value;
      case 'notEquals':
        return fieldValue !== rule.value;
      case 'contains':
        return String(fieldValue || '').includes(rule.value);
      case 'greaterThan':
        return Number(fieldValue) > Number(rule.value);
      case 'lessThan':
        return Number(fieldValue) < Number(rule.value);
      case 'in':
        return Array.isArray(rule.value) && rule.value.includes(fieldValue);
      case 'notIn':
        return Array.isArray(rule.value) && !rule.value.includes(fieldValue);
      default:
        return true;
    }
  }

  private getNestedValue(obj: any, path: string): any {
    return path.split('.').reduce((current, key) => 
      current && current[key] !== undefined ? current[key] : null, obj
    );
  }
}

Servicio de formularios adaptativos

Para manejar la reactividad completa, creamos un servicio especializado que combina la generación de formularios con la lógica condicional:

@Injectable({
  providedIn: 'root'
})
export class AdaptiveFormService {
  private dynamicFormService = inject(DynamicFormService);
  private conditionalService = inject(ConditionalLogicService);

  generateAdaptiveForm(config: FormConfig): {
    form: FormGroup;
    fieldStates: WritableSignal<Map<string, FieldState>>;
    updateFieldStates: () => void;
  } {
    const form = this.dynamicFormService.generateForm(config);
    const fieldStates = signal(new Map<string, FieldState>());
    
    const updateFieldStates = () => {
      const currentValue = form.value;
      const newStates = new Map<string, FieldState>();
      
      for (const field of config.fields) {
        const state = this.evaluateFieldState(field, currentValue);
        newStates.set(field.key, state);
        this.applyFieldState(form, field.key, state);
      }
      
      fieldStates.set(newStates);
    };

    // Configurar reactividad
    form.valueChanges.subscribe(() => {
      updateFieldStates();
    });

    // Evaluación inicial
    updateFieldStates();

    return { form, fieldStates, updateFieldStates };
  }

  private evaluateFieldState(field: FormFieldConfig, formValue: any): FieldState {
    const visible = field.visibilityRules ? 
      this.conditionalService.evaluateConditions(field.visibilityRules, formValue) : 
      (field.visible !== false);

    const enabled = field.enabledRules ? 
      this.conditionalService.evaluateConditions(field.enabledRules, formValue) : 
      (field.enabled !== false);

    // Evaluar validadores condicionales
    const activeValidators = this.getActiveValidators(field, formValue);
    
    // Evaluar propiedades dinámicas
    const dynamicProps = this.evaluateDynamicProperties(field, formValue);

    return {
      visible,
      enabled,
      validators: activeValidators,
      dynamicProperties: dynamicProps
    };
  }

  private getActiveValidators(field: FormFieldConfig, formValue: any): ValidatorConfig[] {
    let validators = [...(field.validators || [])];
    
    for (const conditional of field.conditionalValidators || []) {
      if (this.conditionalService.evaluateConditions(conditional.rules, formValue)) {
        validators.push(...conditional.validators);
      }
    }
    
    return validators;
  }

  private evaluateDynamicProperties(field: FormFieldConfig, formValue: any): Record<string, any> {
    const props: Record<string, any> = {};
    
    for (const dynamicProp of field.dynamicProperties || []) {
      if (this.conditionalService.evaluateConditions(dynamicProp.rules, formValue)) {
        props[dynamicProp.property] = dynamicProp.value;
      }
    }
    
    return props;
  }

  private applyFieldState(form: FormGroup, fieldKey: string, state: FieldState) {
    const control = form.get(fieldKey);
    if (!control) return;

    // Aplicar estado de habilitación
    if (state.enabled && control.disabled) {
      control.enable({ emitEvent: false });
    } else if (!state.enabled && control.enabled) {
      control.disable({ emitEvent: false });
    }

    // Actualizar validadores
    const validatorFns = state.validators.map(v => this.createValidatorFn(v));
    control.setValidators(validatorFns);
    control.updateValueAndValidity({ emitEvent: false });
  }
}

interface FieldState {
  visible: boolean;
  enabled: boolean;
  validators: ValidatorConfig[];
  dynamicProperties: Record<string, any>;
}

Componente de campo adaptativo

El componente que renderiza cada campo debe reaccionar automáticamente a los cambios de estado usando signals:

@Component({
  selector: 'app-adaptive-field',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    @if (fieldState().visible) {
      <div class="field-container" 
           [class]="fieldState().dynamicProperties['cssClass'] || field.cssClass">
        
        <label [for]="field.key">
          {{ fieldState().dynamicProperties['label'] || field.label }}
          @if (isRequired()) {
            <span class="required">*</span>
          }
        </label>

        @switch (field.type) {
          @case ('text') {
            <input 
              [id]="field.key"
              [formControlName]="field.key"
              [placeholder]="fieldState().dynamicProperties['placeholder'] || field.placeholder"
              [disabled]="!fieldState().enabled"
              type="text">
          }
          
          @case ('select') {
            <select 
              [id]="field.key"
              [formControlName]="field.key"
              [disabled]="!fieldState().enabled">
              @for (option of getCurrentOptions(); track option.value) {
                <option [value]="option.value">{{ option.label }}</option>
              }
            </select>
          }
          
          @case ('checkbox') {
            <input 
              [id]="field.key"
              [formControlName]="field.key"
              [disabled]="!fieldState().enabled"
              type="checkbox">
          }
        }

        @if (hasErrors()) {
          <div class="field-errors">
            @for (error of getErrorMessages(); track error) {
              <span class="error-message">{{ error }}</span>
            }
          </div>
        }
      </div>
    }
  `
})
export class AdaptiveFieldComponent {
  @Input({ required: true }) field!: FormFieldConfig;
  @Input({ required: true }) form!: FormGroup;
  @Input({ required: true }) fieldState!: Signal<FieldState>;

  isRequired(): boolean {
    const state = this.fieldState();
    return state.validators.some(v => v.type === 'required');
  }

  getCurrentOptions(): SelectOption[] {
    const state = this.fieldState();
    return state.dynamicProperties['options'] || this.field.options || [];
  }

  hasErrors(): boolean {
    const control = this.form.get(this.field.key);
    return !!(control?.errors && control.touched);
  }

  getErrorMessages(): string[] {
    const control = this.form.get(this.field.key);
    if (!control?.errors) return [];

    const messages: string[] = [];
    const state = this.fieldState();
    
    for (const validator of state.validators) {
      if (control.errors[validator.type] && validator.message) {
        messages.push(validator.message);
      }
    }
    
    return messages;
  }
}

Casos de uso empresariales

Los formularios adaptativos brillan en escenarios empresariales complejos. Un ejemplo típico es un formulario de configuración de productos donde las opciones disponibles dependen de las selecciones previas:

// Configuración de ejemplo: Formulario de configuración de servidor
const serverConfigForm: FormConfig = {
  title: 'Configuración de Servidor',
  fields: [
    {
      key: 'serverType',
      type: 'select',
      label: 'Tipo de Servidor',
      options: [
        { value: 'web', label: 'Servidor Web' },
        { value: 'database', label: 'Base de Datos' },
        { value: 'application', label: 'Servidor de Aplicaciones' }
      ],
      required: true
    },
    {
      key: 'webServerEngine',
      type: 'select',
      label: 'Motor de Servidor Web',
      options: [
        { value: 'apache', label: 'Apache' },
        { value: 'nginx', label: 'Nginx' },
        { value: 'iis', label: 'IIS' }
      ],
      visibilityRules: [
        { field: 'serverType', operator: 'equals', value: 'web' }
      ],
      conditionalValidators: [
        {
          rules: [{ field: 'serverType', operator: 'equals', value: 'web' }],
          validators: [{ type: 'required', message: 'Selecciona un motor web' }]
        }
      ]
    },
    {
      key: 'databaseEngine',
      type: 'select',
      label: 'Motor de Base de Datos',
      options: [
        { value: 'mysql', label: 'MySQL' },
        { value: 'postgresql', label: 'PostgreSQL' },
        { value: 'mongodb', label: 'MongoDB' }
      ],
      visibilityRules: [
        { field: 'serverType', operator: 'equals', value: 'database' }
      ]
    },
    {
      key: 'sslEnabled',
      type: 'checkbox',
      label: 'Habilitar SSL',
      visibilityRules: [
        { field: 'serverType', operator: 'in', value: ['web', 'application'] }
      ]
    },
    {
      key: 'sslCertificate',
      type: 'text',
      label: 'Ruta del Certificado SSL',
      placeholder: '/path/to/certificate.pem',
      visibilityRules: [
        { field: 'serverType', operator: 'in', value: ['web', 'application'] },
        { field: 'sslEnabled', operator: 'equals', value: true, logicalOperator: 'AND' }
      ],
      conditionalValidators: [
        {
          rules: [
            { field: 'sslEnabled', operator: 'equals', value: true }
          ],
          validators: [
            { type: 'required', message: 'El certificado SSL es obligatorio' },
            { type: 'pattern', value: '^\/.*\\.pem$', message: 'Debe ser una ruta válida a archivo .pem' }
          ]
        }
      ]
    }
  ]
};

Optimización de rendimiento

Para formularios con muchas dependencias, es crucial implementar estrategias de optimización que eviten evaluaciones innecesarias:

@Injectable({
  providedIn: 'root'
})
export class OptimizedConditionalService {
  private dependencyGraph = new Map<string, Set<string>>();
  private evaluationCache = new Map<string, boolean>();

  buildDependencyGraph(fields: FormFieldConfig[]) {
    this.dependencyGraph.clear();
    
    for (const field of fields) {
      const dependencies = new Set<string>();
      
      // Extraer dependencias de todas las reglas
      this.extractDependencies(field.visibilityRules || [], dependencies);
      this.extractDependencies(field.enabledRules || [], dependencies);
      
      for (const conditional of field.conditionalValidators || []) {
        this.extractDependencies(conditional.rules, dependencies);
      }
      
      this.dependencyGraph.set(field.key, dependencies);
    }
  }

  getAffectedFields(changedField: string): Set<string> {
    const affected = new Set<string>();
    
    for (const [fieldKey, dependencies] of this.dependencyGraph) {
      if (dependencies.has(changedField)) {
        affected.add(fieldKey);
      }
    }
    
    return affected;
  }

  private extractDependencies(rules: ConditionalRule[], dependencies: Set<string>) {
    for (const rule of rules) {
      dependencies.add(rule.field);
    }
  }
}

Esta aproximación optimizada permite actualizar selectivamente solo los campos afectados cuando cambia un valor específico, reduciendo significativamente el costo computacional en formularios complejos con cientos de campos interdependientes.

Los formularios adaptativos transforman la experiencia del usuario, creando interfaces inteligentes que se ajustan dinámicamente al contexto, mejorando tanto la usabilidad como la eficiencia en la captura de datos empresariales.