技能 @delon/form Dynamic Schema Forms
📝
@delon/form Dynamic Schema Forms
安全
@delon/formで動的フォームを構築する
複雑なフォームの作成には大量のボイラープレートコードが必要です。@delon/formはJSON Schemaを使用した宣言的なフォーム生成を可能にし、Angularアプリケーション全体での開発時間の短縮と一貫したバリデーションの確保を実現します。
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「@delon/form Dynamic Schema Forms」。 @delon/formを使用して、name、email、password、confirm password、role選択を含むユーザー登録フォームを作成
預期結果:
- フォームスキーマ: name（必須、maxLength 100）、email（email形式）、password（カスタムバリデーター）、confirm password（一致バリデーター）、role（enumドロップダウン）のプロパティ
- UIスキーマ: 2列のグリッドレイアウト、プレースホルダーテキスト、role用の選択ウィジェット
- バリデーター: 大文字を含む最低8文字のパスワード要件、confirm passwordは一致する必要がある
- アクション: ローディング状態処理付きの送信ボタンとリセットボタン
安全審計
安全v3 • 1/10/2026
Pure documentation skill containing only SKILL.md with code examples. No executable code, scripts, network calls, file system access, or environment variable reads. This is a safe prompt-based guidance resource.
1
已掃描檔案
628
分析行數
0
發現項
3
審計總數
未發現安全問題
審計者: claude 查看審計歷史 →
品質評分
38
架構
100
可維護性
81
內容
31
社群
100
安全
61
規範符合性
你能建構什麼
迅速なフォーム開発
スキーマを定義してテンプレートボイラープレートを手作業で記述することで、フォーム作成を加速
一貫したバリデーション
JSON Schema標準を使用して、フロントエンドとバックエンド間でバリデーションルールを共有
レスポンシブなフォームレイアウト
グリッドシステムとレスポンシブなブレークポイントを構成して、一貫したフォーム表示を実現
試試這些提示
基本的なフォームセットアップ
JSON Schemaを使用して、name、email、ageフィールドを持つ基本的な@delon/formスキーマを作成
非同期データ読み込み
@delon/formでカスケード選択ドロップダウンと非同期データ読み込みを実装する方法を示す
カスタムバリデーション
@delon/formスキーマでパスワードフィールドが一致することを確認するカスタムバリデーターを追加
マルチステップウィザード
Angularシグナルを使用して、3ステップでユーザー情報を収集するマルチステップウィザードフォームを構築
最佳實務
- スキーマで必須フィールドを定義して適切なバリデーションを確保
- データ型に適したウィジェットタイプを使用（文字列、数値、真偽値など）
- 動的ドロップダウンのために非同期データ読み込みを実装して初期ペイロードを削減
避免
- 選択可能なオプションにenum定義の代わりにハードコードされた値を使用
- フォームエラー処理をスキップして、ユーザーにフィードバックを提供しない
- 複雑なバリデーターをインラインで定義して、再利用可能な関数に抽出しない
常見問題
どのAngularバージョンがサポートされていますか？
@delon/formはAngular 17以降で、スタンドアロンコンポーネントサポートが有効になっている必要があります
フォームフィールドの最大数はいくつですか？
厳密な制限はありません。パフォーマンスはブラウザの機能とバリデーションの複雑さに依存します
リアクティブフォームと統合できますか？
はい、SFComponentはAngularリアクティブフォームおよび状態管理との統合のためのイベントを提供します
ユーザー入力データは保存または送信されますか？
いいえ、このスキルはドキュメントのみを提供します。フォームデータの処理はアプリケーションの実装に依存します
フォームバリデーションの問題をデバッグするにはどうすればよいですか？
formErrorイベントハンドラーを使用して、バリデーションエラーを捕获してトラブルシューティング用にログに記録します
Angularリアクティブフォームとどのように比較されますか？
@delon/formは宣言的なスキーマベースの生成を追加し、カスタムバリデーターとリアクティブなパターンを引き続きサポートします