如何在2位数角4后的输入字段中添加短划线/连字符

Question

嘿我想在用户手动输入出生日期时添加破折号。像这样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) && 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('-');

  }
}

这就是我得到的

我的预期结果是08-17-2019

任何人都可以帮我，我怎么能实现这一目标？

Answer 1

修改了你的指令一点点，它的工作正常

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（包括' - '） 然后for循环你总是递增2，这将无法解决，因为我们需要最后一项中的4个值。 此外，您需要先删除“ - ”，然后再继续执行逻辑。

检查一下

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

Answer 2

您可能希望像这样使用ngModelChange：

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

然后在控制器.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
}

由于绑定[ngModel]="dateOfBirth"，dob将在表单控件中更新