JSON-Based Form Solution for Complex B-end Scenarios in NetEase Cloud Music

This article introduces a comprehensive form solution for B-end (business) applications developed by NetEase Cloud Music's frontend team. The solution addresses common challenges in traditional Ant Design form development, including code serialization issues, validation state management, complex linkage logic maintenance, and state switching difficulties.

The solution uses JSON-based Schema configuration built on top of Ant Design's Form component. It provides several key features: validation using async-validator with extended status (error/warning) and trigger (submit/change/blur) options; a reverse-listener approach for field linkage using watch, condition, and set fields; four mutually exclusive form states (edit, disabled, preview, hidden); flexible options configuration supporting Array, string URLs, objects with action/nameProperty/valueProperty/path, and function-based async options; and form list support for Table and Card layouts.

The framework architecture separates core logic from rendering using a Pub/Sub communication pattern. The core layer contains Form, Field, ListenerManager, Validator, and OptionManager components, while the rendering layer only handles UI presentation. This separation enables data sharing between fields, render optimization for performance, and framework-agnostic core logic that can be adapted to multiple frameworks.

Additional features include field deconstruction for splitting single field values into multiple fields (e.g., RangePicker to startTime/endTime), field recombination using the Combine component to merge multiple fields into one, and ignoreValues configuration to exclude specific field states (hidden, preview, disabled, null, undefined, falseLike) from submitted values.