Угловая дата преобразования

Question

У меня есть поле ввода с именем month.

  <span>
        Month: <br />
        <input id="typeahead-basic" type="text" class="form-control month" />
    </span>

Я хочу сделать следующее: если вы введете 6 в поле месяца, оно автоматически изменится на 06, если вы введете 2,изменится на 02. Таким образом, все от 1 до 9 следует добавить ноль.Было бы хорошо, если бы я мог реализовать это в классе component.ts.Большое спасибо!

Редактировать: Итак, что я сделал: Это в компоненте:

 checkMonth() {
    if (this.month < 1) {
        this.month = "01";
    } else if (this.month > 12) {
        this.month = 12;
    } else if (this.month < 10) {
        this.month = '0' + this.month;
    }
}

И это как HTML-код:

<input class="form-control hideSpinners" min=1 max=12 type="number" [(ngModel)]="month"
                (change)="checkMonth()"/>

Answer 1

slice с отрицательным значением отлично подойдет:

const input = document.querySelector('input[type="text"]#id');

input.addEventListener('blur', () => {
  input.value = input.value.length === 1 ? 
    `0${input.value}`.slice(-2) :
    input.value;
});

<input id="id" type="text" placeholder="Enter a numeric value">
<input type="text" placeholder="Enter a numeric value (HTML only)" onblur="this.value = this.value.length === 1 ? ('0' + this.value).slice(-2) : this.value">

Answer 2

Вы можете использовать директиву ngModel. Так что-то вроде:

  <span>
        Month: <br />
        <input name="inputfield" #input [(ngModel)]="month" (input)="changeDate(month)" id="typeahead-basic" type="text" class="form-control month" />
    </span>

Вам понадобится открытое свойство в вашем компоненте, которое соответствует ngModel, поэтому в этом случае "month".

Тогда вам просто нужно написать функцию changeDate, которая берет значение ngModel из поля ввода и добавляет к нему 0, что достаточно просто в ванильном javascript.

Answer 3

Невозможно с простым HTML.

Что вы можете сделать, это вызвать функцию onChange, когда ваше значение изменится.

<span>
    Month: <br />
    <input id="typeahead-basic" type="text" class="form-control month" onchange="addZero(this)"/>
</span>

В вашем компонентном скрипте

addZero(input) {
    if(input.value > 0 && input.value < 10) input.value = `0${input.value}`;
}

Пример: http://jsfiddle.net/nrjw56sv/ (Vanilla JS) https://stackblitz.com/edit/angular-fr19pk (угловой)