Как контролировать тип значения, связанного с помощью ngModel (число искажается в строку)?

Question

Я задал вопрос и все заработало. Однако я заметил, что, хотя предоставленные данные состоят из объектов, объявленных следующим образом:

export interface GisPoint { e: number; n: number; }

, когда пользователь вводит значение, исходное содержимое составляет {e: 12, n: 34} становиться string'i sh, то есть {e: "123", n: 34} . Я понимаю, что результатом ввода будет строка, поэтому мне придется ее преобразовать. Однако, поскольку привязка проходит через ngModel , я фактически не реагирую явно на keyUp или blur .

Должен ли я явно сделай это? Если это так, то нет смысла использовать ngModel . Было бы очень удобно иметь возможность сохранять тип при вводе отредактированного значения.

Answer 1

Учитывая эту HTML разметку:

<input type="number" [(ngModel)]="data.age">

Вы получите желаемый номер в вашей модели. Angular не преобразует его в строку. Один «побочный эффект» заключается в том, что браузер добавит эти счетчики чисел.

Самый простой способ скрыть их - использовать небольшое правило css:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

Подробнее о css здесь и здесь .

Проверить это работает stackblitz .

Answer 2

Вы можете реализовать интерфейс ControlValueAccessor для Компонента, чтобы указать, какое значение представляет модель.

Вот пара хороших статей для начала:

• https://medium.com/@majdasab / реализация-значения-доступа-доступа-управления- angular -1b89f2f84ebf
• https://alligator.io/angular/custom-form-control/