Cookbooks / Signal forms

Angular signal forms

form() derives the field tree from a model signal. Bind native inputs with [formField] and [base-input]. CVA hosts such as toggle and custom-select take the same [formField] binding. The settings form still shows the ngModel path.

  1. Install inputs. Run npx base-ui-cli add input-group.
  2. Create the form. Build form() from a model signal and attach schema validators (required, email, maxLength).
  3. Bind fields. Put [formField] and base-input / base-textarea on native controls.
  4. Submit. Call submit() and read the model signal. CVA hosts (toggle, custom-select, combobox) accept [formField] through Angular’s CVA interop.