@delon/form Dynamic Schema Forms Skill

@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, SFUISchema } from '@delon/form';
import { SHARED_IMPORTS } from '@shared';

@Component({
  selector: 'app-user-form',
  standalone: true,
  imports: [SHARED_IMPORTS, SFComponent],
  template: `
    <sf 
      [schema]="schema"
      [ui]="ui"
      [formData]="initialData()"
      [loading]="loading()"
      (formSubmit)="handleSubmit($event)"
      (formChange)="handleChange($event)"
      (formError)="handleError($event)"