У меня есть ввод HTML, который указывает год так:
<input type = "number" name = "year" placeholder = "Year" [max] = "presentYear" min = "1950">
Ввод не требуется, поэтому по умолчанию я просто хочу, чтобы присутствовал заполнитель «Год». Однако, как только пользователь щелкает стрелки вверх или вниз в поле ввода, я хочу, чтобы значение max отображалось по умолчанию, в данном случае текущий год (2018). Однако вместо этого отображается минимальное количество. В данной ситуации это не имеет смысла, поскольку пользователю придется пролистать 68 лет, чтобы добраться до наиболее распространенного варианта использования.
Есть ли способ указать "первое значение" по умолчанию для поля ввода числового типа? Если это поможет ответить на вопрос, я использую Angular 5 для этого проекта.






в 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.
Я изменил обработчик событий ngModelChange, чтобы сбросить значение min, если поле очищено.
Это работает только в первый раз. Если пользователь стирает значение, а затем снова использует стрелку, мы возвращаемся к исходной точке. Тем не менее, это продвинуло меня достаточно далеко, чтобы понять, как решить эту проблему, поэтому я отмечу его как принятый.