Как добавить тире/дефис в поле ввода после 2 цифр angular 4
эй, я хочу добавить тире, когда пользователь вводит дату рождения вручную. так 18.08.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('-');
}
}
это то, что я получаю
мой ожидаемый результат то есть 17.08.2019
может ли кто-нибудь помочь мне, как я могу этого добиться?
Ответы 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 - это текущее значение на входе, которое ngOnChanges позволяет вам изменить, что, в свою очередь, обновит входное значение с изменениями.
Немного изменил вашу директиву, и она работает нормально
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 (включая '-')
Затем для цикла вы всегда увеличивали 2 , что не сработает, так как нам требуется 4 значения в последнем элементе.
Также вам нужно удалить «-», прежде чем продолжить свою логику.
Проверь это
https://stackblitz.com/edit/angular-8dnjfw
это сработало частично, но backspace не работает, например, если я напишу 09-02-2019, то я удалю его с помощью backspace, он просто удалит 2019 и застрянет на 09-02- @Midhun Murali
означает, что 2 тире не удаляются
@UsmanSaleem только что обновил ответ, добавив проверку перед отправкой в массив.
что такое доб? директива @danday74