delon-form-dynamic-schema-forms
使用 @delon/form 建立動態表單
建立複雜表單需要大量的樣板程式碼。@delon/form 能夠使用 JSON Schema 以宣告式方式生成表單,減少開發時間並確保 Angular 應用程式中的驗證一致性。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“delon-form-dynamic-schema-forms”。 Create a user registration form with @delon/form including name, email, password, confirm password, and role selection
预期结果:
- 表單架構:name 的屬性(必填,maxLength 100)、email(format email)、password(自訂驗證器)、confirm password(比對驗證器)、role(列舉下拉選單)
- UI 架構:2 欄網格佈局、預留位置文字、role 選項的選擇元件
- 驗證器:密碼最少 8 個字元且需要大寫字母、確認密碼必須與原始密碼相符
- 操作:提交和重設按鈕,具有載入狀態處理和錯誤事件回呼
安全审计
安全All 81 static findings are false positives caused by pattern matching without context awareness. This is pure documentation containing only Markdown code examples for Angular form development. No executable code, scripts, network calls, file system access, or malicious patterns exist. Documentation URLs (ng-alain.com, json-schema.org) are legitimate references. Backtick patterns flagged as 'shell execution' are Markdown code block delimiters. Password validation regex patterns flagged as 'weak cryptographic algorithms' are standard form validation. No additional threats were detected.
风险因素
🌐 网络访问 (4)
📁 文件系统访问 (2)
⚙️ 外部命令 (47)
质量评分
你能构建什么
快速表單開發
透過定義架構而非手動編寫範本樣板來加速表單建立
一致的驗證
使用 JSON Schema 標準在前端和後端之間共享驗證規則
響應式表單佈局
配置網格系統和響應式中斷點以實現一致的表單呈現
试试这些提示
Create a basic @delon/form schema with name, email, and age fields using JSON Schema definitions
Show how to implement cascading select dropdowns with async data loading in @delon/form
Add a custom validator to confirm password fields match in an @delon/form schema
Build a multi-step wizard form with Angular signals that collects user info across 3 steps
最佳实践
- 在架構中定義必填欄位以確保適當的驗證回饋
- 使用與資料類型相符的適當元件類型,例如字串、數字、布林值或選擇
- 為動態下拉選單實作非同步資料載入以減少初始負載大小
避免
- 使用硬編碼字串值而非列舉定義來表示可選擇的選項
- 跳過表單錯誤處理,導致使用者無法獲得驗證回饋
- 內聯定義複雜的驗證器邏輯,而非提取為可重複使用的函式