Как разрешить только буквы и добавить точку после каждой буквы в директиве атрибута Angular? - PullRequest
Новая
       16

Как разрешить только буквы и добавить точку после каждой буквы в директиве атрибута Angular?

0 голосов
/ 14 июля 2020

У меня есть поле ввода для инициалов, где я хочу использовать директиву для изменения значения.

Разрешены только буквы , и он должен добавлять точку после каждого письмо . Backspace and delete ключи должны быть рабочие, чтобы удалить. И ключ space в настоящее время очищает все значение, что неверно.

То, что у меня сейчас есть внутри директивы: 

@HostListener('input') onChange() {

const onlyLetter = new RegExp('[a-zA-ZÀ-ÖØ-öø-ÿā]');
let outputValue = '';
let keyPressed: any;
const fieldValue = this.el.nativeElement.value;

const changeField = function(value:any) {
    const inputValue = value || '';
    const lastChar = inputValue.slice(-1);
    const initialInput = inputValue.slice(0, inputValue.length - 1);

    // Allow space, backspace and delete
    if (keyPressed === 8 || keyPressed === 46) {
        outputValue = inputValue;
        keyPressed = undefined;
    } else if (onlyLetter.test(lastChar)) {
        outputValue = initialInput;
        outputValue += lastChar.toUpperCase() + '.';
    } 
    return outputValue;
};

this.renderer2.setProperty(this.el.nativeElement, 'value', changeField(fieldValue));

Работает в основном. Но клавиши space, backspace and delete не работают должным образом.

Backspace and delete теперь невозможно. При нажатии клавиши space он очищает все значение, нажатие space должно сохранить значение, но не должно допускать пробелов.

Итак, как я могу включить клавиши backspace and delete и не удалять значение при нажатии space?

Например:

  • При вводе ab c отобразится AB C.
  • При вводе ab c + пробел отобразит AB C.
  • При вводе ab c + delete / backspace отобразится AB
...