Class TestNumberInput

packages/forms/signals/test/node/parse_errors.spec.ts:382–413

});

@Component({
  selector: 'test-number-input',
  template: `
    <input type="text" [value]="rawValue()" (input)="rawValue.set($event.target.value)" />
    @for (e of errors(); track $index) {
      <p class="error">{{ e.message }}</p>
    }
  `,
})
class TestNumberInput implements FormValueControl<number | null> {
  readonly value = model.required<number | null>();
  readonly errors = input<readonly ValidationError[]>([]);
  readonly parseMax = input<number | undefined>(undefined);

  protected readonly rawValue = transformedValue(this.value, {
    parse: (rawValue) => {
      if (rawValue === '') return {value: null};
      const value = Number(rawValue);
      if (Number.isNaN(value)) {
        return {error: {kind: 'parse', message: `${rawValue} is not numeric`}};
      }
      if (this.parseMax() != null && value > this.parseMax()!) {
        return {value, error: [maxError(this.parseMax()!)]};
      }
      return {value};
    },
    format: (value) => {
      if (value === null || Number.isNaN(value)) return '';
      return value.toString();
    },
  });
}

async function act<T>(fn: () => T): Promise<T> {
  const result = fn();