如何在响应式表单中实现自定义指令答案

【问题标题】：How to implement custom directive inside the reactive form如何在响应式表单中实现自定义指令
【发布时间】：2019-05-03 11:12:13
【问题描述】：

我需要对电话号码进行简单的验证。这个文件已经在反应表单中了。所以我已经编写了自定义指令并实现了，但它甚至无法检测到

我创建了单独的指令文件并注入但没有用:(

directive.ts

//custom directive for phone number
import { Directive, ElementRef, Output, EventEmitter, HostListener, Input } from '@angular/core';

@Directive({
    selector: '[myNumberOnly]'
})

export class NumberOnlyDirective {

    private regex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);
    private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-'];
    constructor(private el: ElementRef) {
    }
    @HostListener('keydown', ['$event'])
    keydown(event: KeyboardEvent) {
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }
        let current: string = this.el.nativeElement.value;
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

HTML

html部分

<form [formGroup]="arrangeFE">
 <input myNumberOnly="true" type="text" formControlName="FEName" class="input_Align" name="" [(ngModel)]="arrangeFieldEngineer.name" [readonly]="arrangeFieldEngineer.isReadonly"  placeholder="Enter FE Name"
         autocomplete="off">
    <form>

需要对电话号码进行自定义验证，并且应该以反应形式使用。当用户输入正确的号码时，只有它应该通过 ng-valid

【问题讨论】：

请在您的回答中包括澄清、进一步解释等。不要为此使用comments。评论应用于询问更多信息或提出改进建议。
我认为这应该是两个不同的东西：自定义指令和/或自定义验证器
控制台有错误吗？
只需输入myNumberOnly（不是myNumberOnly=yes）。如果您的指令有输入，则使用 [myNumberOnly]="variable"。您可以在stackoverflow.com/questions/54460923/… 中查看示例

标签： angular angular2-directives

【解决方案1】：

试试这个：

export class CustomValidator {
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

【讨论】：