Блог

эй, я хочу добавить тире, когда пользователь вводит дату рождения вручную. как это 08-18-2019, но я не могу этого сделать

  public dateOfBirth: { year: number; month: number; day: number };
  

html-файл

  <input
          ngbDatepicker
          dobMask
          #d="ngbDatepicker"
          #dobF="ngModel"
          class="form-control input-underline input-lg"
          id="dob"
          [(ngModel)]="dateOfBirth"
          placeholder="mm-dd-yyyy"
          name="dp"
          [ngClass]="{
            invalid:
              (dobF.value === null || isString(dobF.value) || futureDate) amp;amp; dobF.touched
          }"
          required
        />
  

я пробовал директиву, но результат примерно такой
11———3

вот мой код директивы

 @Directive({
selector: '[dobMask]'
})
export class DobDirective {

@HostListener('input', ['$event'])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;

let trimmed = input.value.replace(/s /g, '');
if (trimmed.length > 8) {
  trimmed = trimmed.substr(0, 8);
}

let numbers = [];
for (let i = 0; i < trimmed.length; i  = 2) {
  numbers.push(trimmed.substr(i, 2));
}

input.value = numbers.join('-');

  }
}
  

это то, что я получаю

мой ожидаемый результат, т.е. 17.08.2019

кто-нибудь может мне помочь, как я могу этого добиться?

Немного изменил вашу директиву, и она работает нормально

 import {Directive,HostListener} from '@angular/core'

@Directive({
selector: '[dobMask]'
})
export class DobDirective {

@HostListener('input', ['$event'])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;

let trimmed = input.value.replace(/s /g, '');

if (trimmed.length > 10) {
  trimmed = trimmed.substr(0, 10);
}


trimmed = trimmed.replace(/-/g,'');

 let numbers = [];
  numbers.push(trimmed.substr(0,2));
 if(trimmed.substr(2,2)!=="")
 numbers.push(trimmed.substr(2,2));
 if(trimmed.substr(4,4)!="")
 numbers.push(trimmed.substr(4,4));
input.value = numbers.join('-');

  }
}
  

1. Первая проблема заключалась в том, что вы обрезали длину 8, она должна быть 10
   (включая ‘-‘)

   2. Затем для цикла вы всегда увеличиваете 2, что не сработает, так как нам требуется 4 значения в последнем элементе.

   3. Также вам необходимо удалить ‘-‘, прежде чем продолжить свою логику.

проверьте это

https://stackblitz.com/edit/angular-8dnjfw

Возможно, вы захотите использовать ngModelChange следующим образом:

 <input [ngModel]="dateOfBirth" (ngModelChange)="updateDateOfBirth($event)">
  

затем в файле controller .ts:

 updateDateOfBirth(dob) {
  // some logic to insert hyphens if it is in a valid format
  // pseduocode:
  // IF dob matches required format THEN
  //   dob = dob with Hyphens inserted
  this.dateOfBirth = dob
}
  

dob будет обновляться в элементе управления формой из-за привязки [ngModel]="dateOfBirth"