delon-form-dynamic-schema-forms

name	delon-form-dynamic-schema-forms
description	Create dynamic schema-based forms using @delon/form (SF component). Use this skill when building complex forms with validation, conditional rendering, async data loading, custom widgets, and multi-step workflows. Ensures forms follow JSON Schema standards, integrate with Angular reactive forms, support internationalization, and maintain consistent validation patterns across the application.
license	MIT

@delon/form Dynamic Schema Forms Skill

This skill helps create dynamic forms using @delon/form's SF (Schema Form) component.

Core Principles

Schema-Driven Forms

• JSON Schema: Define forms declaratively with JSON Schema
• Type Safety: Full TypeScript support for schema definitions
• Validation: Built-in validation with custom validators
• Dynamic Rendering: Conditional fields based on form state

Key Features

• Automatic form generation from schema
• Custom widgets for specialized inputs
• Async data loading (dropdowns, autocomplete)
• Multi-step forms (wizards)
• Responsive grid layouts
• Internationalization support

Basic Schema Form

import { Component, signal, output } from '@angular/core';
import { SFSchema, SFComponent,  }  ;
 {  }  ;

({
  : ,
  : ,
  : [, ],
  : 
})
   {
  loading = ();
  initialData = signal<>({});
  formSubmit = output<>();
  
  :  = {
    : {
      : {
        : ,
        : ,
        : 
      },
      : {
        : ,
        : ,
        : 
      },
      : {
        : ,
        : ,
        : ,
        : 
      },
      : {
        : ,
        : ,
        : [, , ],
        : 
      }
    },
    : [, , ]
  };
  
  :  = {
    : {
      : ,
      : ,
      : { :  }
    },
    : {
      : ,
      : 
    },
    : {
      : ,
      : 
    },
    : {
      : 
    },
    : {
      : ,
      : 
    }
  };
  
  (: ):  {
    .(, value);
    ..(value);
  }
  
  (: ):  {
    .(, value);
  }
  
  (: ):  {
    .(, errors);
  }
}