Creates a writable signal representing a "raw" UI value that is transformed to/from a model
value via parse and format functions.
API
function transformedValue<TValue, TRaw>( value: ModelSignal<TValue>, options: TransformedValueOptions<TValue, TRaw>,): TransformedValueSignal<TRaw>;Description
Creates a writable signal representing a "raw" UI value that is transformed to/from a model
value via parse and format functions.
This utility simplifies the creation of custom form controls that parse a user-facing value representation into an underlying model value. For example, a numeric input that displays and accepts string values but stores a number.
Parse errors are exposed via the returned signal’s parseErrors() property.
When transformedValue is used within a Signal Forms field context, parse errors are also
reported to the nearest field automatically. When no field context is present, no automatic
reporting occurs and parseErrors can be consumed directly.
Note: parse may return both a value and an error. Returning value updates the model;
omitting it leaves the model unchanged.
Usage Notes
@Component({ selector: 'number-input', template: `<input [value]="rawValue()" (input)="rawValue.set($event.target.value)" />`,})export class NumberInput implements FormValueControl<number | null> { readonly value = model.required<number | null>(); protected readonly rawValue = transformedValue(this.value, { parse: (val) => { if (val === '') return {value: null}; const num = Number(val); if (Number.isNaN(num)) { return {error: {kind: 'parse', message: `${val} is not numeric`}}; } return {value: num}; }, format: (val) => val?.toString() ?? '', });}