angular - 自定义电子邮件指令 Angular 7

Question

我是角度的新手。我想为用户创建一个表单来选择他自己的电子邮件地址。我想创建一个指令，允许用户输入字母数字字符“。” 或“-”，不允许其他字符。请问你有例子吗？

Answer 1

您可以创建一个新文件 email.directive.ts，并将其用作主模块文件中的提供。之后使用它的选择器和输入字段。希望有帮助。

import { Directive, ElementRef, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
    selector: '[email-directive]'
})

export class EmailDirective {

    private checkPattern(value: string) {
        const regExpString =  "^[a-zA-Z0-9_@.+ ]*$"; // characters only
        return String(value).match(new RegExp(regExpString));
    }

    private specialKeys = [
        'Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Delete'
    ];

    constructor(private el: ElementRef, private control : NgControl) { }

    lastValue = '';

    @HostListener('input', ['$event'])
    onInput(event: KeyboardEvent) {
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }
        let current: string = this.el.nativeElement.value;
        if (current && !this.checkPattern(current)) {
            this.el.nativeElement.value = this.lastValue;
            this.control.control.setValue(this.lastValue);
            return;
        }
        this.lastValue = current;
        this.control.control.setValue(this.lastValue);
    }
}

Answer 2

您可以使用 Angular 内置的 EmailValidator https://angular.io/api/forms/Validators#email

对于反应形式

const control = new FormControl('bad@', Validators.email);

对于模板驱动器表单（

<input type="text" name="email" [(ngModel)]="model.property" #email="ngModel" required email />