Тип номера ввода HTML укажите первое значение

У меня есть ввод HTML, который указывает год так:

<input type = "number" name = "year" placeholder = "Year" [max] = "presentYear" min = "1950">

Ввод не требуется, поэтому по умолчанию я просто хочу, чтобы присутствовал заполнитель «Год». Однако, как только пользователь щелкает стрелки вверх или вниз в поле ввода, я хочу, чтобы значение max отображалось по умолчанию, в данном случае текущий год (2018). Однако вместо этого отображается минимальное количество. В данной ситуации это не имеет смысла, поскольку пользователю придется пролистать 68 лет, чтобы добраться до наиболее распространенного варианта использования.

Есть ли способ указать "первое значение" по умолчанию для поля ввода числового типа? Если это поможет ответить на вопрос, я использую Angular 5 для этого проекта.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
0
107
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

в JS:

dateObj: Date = new Date();
year: number = dateObj.getUTCFullYear();
yearModel: number = year;

в HTML

Свяжите свойство с вашим элементом управления вводом, как показано в приведенном ниже коде, который он сделает для вас.

<input type = "number" name = "year" 
  placeholder = "Year" 
  [(ngModel)] = "yearModel"
  [max] = "year"
  min = "1950">

Отдельная модель предотвращает превышение значения текущего года

Ответ принят как подходящий

Вы можете изначально установить для min то же значение, что и для max, и изменить его на 1950 после изменения входного значения с помощью ngModel и ngModelChange. Первый щелчок по кнопке счетчика установит текущий год в качестве начального значения, а измененное значение min позволит изменить его впоследствии.

<input type = "number" name = "year" placeholder = "Year" 
    [(ngModel)] = "year" (ngModelChange) = "setMinYear($event)" 
    [max] = "presentYear" [min] = "minYear">
export class AppComponent {
  presentYear = this.getCurrentYear();
  minYear = this.getCurrentYear();
  year: number;

  private getCurrentYear(): number {
    return new Date().getUTCFullYear();
  }

  public setMinYear(value: number) {
    const firstYear = 1950;
    if (value >= firstYear) {
      this.minYear = firstYear;
    } else {
      this.minYear = this.presentYear;
    }
  }
}

Код можно протестировать в этот stackblitz.

Это работает только в первый раз. Если пользователь стирает значение, а затем снова использует стрелку, мы возвращаемся к исходной точке. Тем не менее, это продвинуло меня достаточно далеко, чтобы понять, как решить эту проблему, поэтому я отмечу его как принятый.

nmg49 25.04.2018 15:53

Я изменил обработчик событий ngModelChange, чтобы сбросить значение min, если поле очищено.

ConnorsFan 25.04.2018 15:58

Другие вопросы по теме