Форматирование строкового значения

Question

У меня проблема с форматированием входного значения. Вот фрагмент:

<input
  type="text"
  class="form-control"
  name="time"
  formControlName="time"
  (input)="convertToMinute($event.target.value)"
/>

Вот функция:

 convertToMinute(value: string) {
    console.log(value);
    let minute = value.slice(0, 2);
    let seconds = value.slice(2, 4);
    let result = minute + ":" + seconds;
    console.log(result);
  }

Но в результате, когда я ввожу 500, получается 50: 0. Мне нужно заменить его на 05:00. Что я делаю не так?

Answer 1

Вы можете использовать padStart() для завершения необработанного значения.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

let raw_val = '500';

let full_val = raw_val.padStart(4, '0');


let minutes = full_val.slice(0,2);
let seconds = full_val.slice(2);

console.log(`${minutes}:${seconds}`);

выход

 "05:00"

JS Бин здесь: https://jsbin.com/ruyerafepe/edit?js, консоль

Answer 2

Тип ввода - это текст, поэтому я думаю, что опция канала может не работать.

 convertToMinute(value: string) {
       console.log(value);
       let seconds = value.slice(value.length-2, value.length);
       console.log(seconds);
       let minute = '';
       if((value.length-seconds.length)<2) {
         minute = '0'+value.slice(0, 1);
       } else {
         minute = value.slice(0, 2);
       }

       let result = minute + ":" + seconds;
       console.log(result);
  }

Answer 3

Мы встроили трубы. Пожалуйста, проверьте документацию https://angular.io/api/common/DatePipe. Я думаю, что 4-й вариант - это то, на что вы смотрите.

{{ dateObj | date }}               // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
{{ dateObj | date:'mm:ss' }}       // output is '43:11'