Как реализовать пользовательскую директиву внутри реактивной формы - PullRequest
Новая
       12

Как реализовать пользовательскую директиву внутри реактивной формы

2 голосов
/ 03 мая 2019

Мне нужна простая проверка номера телефона. Это поле уже находится в реактивной форме. Поэтому я написал пользовательскую директиву и реализовал ее, но она не работает, даже не обнаружив

Я создал отдельный файл директивы и ввелно бесполезно: (

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

1 Ответ

1 голос
/ 03 мая 2019

Попробуйте это: 

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;
  }
}
...