使用 event.preventDefault() 时 Angular2 值未与模型绑定

Question

我已经创建了用于验证的输入指令。在那，我使用 event.preventDefault() 不允许按下键。

以下是我的代码：

<input class="input" maxlength="255" [(ngModel)]="chargeLabel" inputRestrictor pattern="^\w+( \w+)*$" singleSpace="false" />

输入指令代码：

export class InputRestrictorDirective {

    @Input('inputRestrictor') inputRestrictor: any;
    @Input('pattern') pattern: string;
    @Input() singleSpace = 'true';
    private regex: RegExp;

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];

    constructor(private el: ElementRef) {
    }

    @HostListener('keypress', ['$event']) onKeyPress(event) {
        this.regex = new RegExp(this.pattern, 'g');
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        let inputValue: any = event.target.value + event.key;
        if (inputValue.match(this.regex) === null && inputValue !== '') {
            if (this.singleSpace === 'true') {
                event.preventDefault();
                return false;
            } else {
                inputValue = inputValue.replace(/\s\s+/g, ' ');
                inputValue = inputValue.replace(/[^\w\s]/g, '');
                event.target.value = inputValue;
                event.preventDefault();
                return;
            }
        } else {
            return;
        }
    }
}

我的问题是，我在文本框中输入的任何值都没有存储在模型中，但如果我按退格键或 Tab 等特殊键，它将存储在模型中。意味着值与模型绑定。你能帮忙吗？

Answer 1

我找到了解决方案。我只需要将条件放在指令文件中。

if (inputValue.match(/\s\s+/g)) {
    inputValue = inputValue.replace(/\s\s+/g, ' ');
    inputValue = inputValue.replace(/[^\w\s]/g, '');
    this.el.nativeElement.value = inputValue;
    event.preventDefault();
    return;
}

如果输入框中有任何双 space，我需要使用 preventDefault()。

使用 event.preventDefault() 时 Angular2 值未与模型绑定

Angular2 value is not binding with model while using event.preventDefault()

angular2-directives

angular