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.
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 {errors: [{kind: 'parse', message: `${val} is not numeric`}]}; } return {value: num}; }, format: (val) => val?.toString() ?? '', });}Jump to details