Тип входного HTML-кода указывает первое значение

Question

У меня есть HTML-ввод, который указывает год следующим образом:

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

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

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

Answer 1

Вы можете установить 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;
    }
  }
}

Код может быть проверен в этом стеке блиц .

Answer 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">

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