如何在输入字段中的 2 位 angular 后添加 dash/hyphen 4
how to add dash/hyphen in input field after 2 digits angular 4
嘿,我想在用户手动输入出生日期时添加破折号。
像这样
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
任何人都可以帮助我,我怎样才能做到这一点?
您可能想像这样使用 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
}
由于绑定,dob 将在表单控件中更新[ngModel]="dateOfBirth"
稍微修改了你的指令,它工作正常
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('-');
}
}
第一个问题是你用长度 8 修剪,它应该是 10
(包括'-')
然后 for 循环你总是递增 2 ,这不会成功,因为我们在最后一项中需要 4 个值。
此外,在继续您的逻辑之前,您还需要删除“-”。
检查这个
嘿,我想在用户手动输入出生日期时添加破折号。 像这样 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
任何人都可以帮助我,我怎样才能做到这一点?
您可能想像这样使用 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
}
由于绑定,dob 将在表单控件中更新[ngModel]="dateOfBirth"
稍微修改了你的指令,它工作正常
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('-');
}
}
第一个问题是你用长度 8 修剪,它应该是 10 (包括'-')
然后 for 循环你总是递增 2 ,这不会成功,因为我们在最后一项中需要 4 个值。
此外,在继续您的逻辑之前,您还需要删除“-”。
检查这个