transformedValue — Angular

Создаёт записываемый сигнал, представляющий «необработанное» значение пользовательского интерфейса, которое преобразуется в значение модели и обратно с помощью функций parse и format.

API

function transformedValue<TValue, TRaw>(
  value: ModelSignal<TValue>,
  options: TransformedValueOptions<TValue, TRaw>,
): TransformedValueSignal<TRaw>;

@paramvalueModelSignal<TValue>

Сигнал модели для синхронизации.

@paramoptionsTransformedValueOptions<TValue, TRaw>

Конфигурация, включающая функции parse и format.

@returnsTransformedValueSignal<TRaw>

TransformedValueSignal, представляющий необработанное значение с отслеживанием ошибок разбора.

Описание

Эта утилита упрощает создание пользовательских элементов управления формами, которые преобразуют представление значения, видимое пользователю, в базовое значение модели. Например, числовое поле ввода, которое отображает и принимает строковые значения, но хранит число.

Ошибки разбора доступны через свойство parseErrors() возвращаемого сигнала. Если transformedValue используется в контексте поля Signal Forms, ошибки разбора также автоматически передаются ближайшему полю. Если контекст поля отсутствует, автоматическая передача не выполняется, и parseErrors можно использовать напрямую.

Примечание: parse может возвращать как value, так и error. Возврат value обновляет модель; если не возвращать его, модель остаётся без изменений.

Примечания по использованию

@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() ?? '',
  });
}