How to implement custom directive inside the reactive form

Question

I need simple validation for phone number.This filed is already inside the reactive form.so I have written custom directive and I implemented but its not working not even detecting

I created separate directive file and I injected but no use:(

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 section

<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>

need custom validation for phone number and It should be with in the reactive form.When user enters the correct number then only it should pass ng-valid

Please include clarification, further explanation etc. into your answer. Don't use comments for that. Comments should be used for asking for more information or for suggesting improvements. — Youssef
– Youssef, Commented May 3, 2019 at 11:17
I think these should be two different things: a custom directive and/or a custom validator — jcuypers
– jcuypers, Commented May 3, 2019 at 11:17
just put myNumberOnly (not myNumberOnly=yes). You use [myNumberOnly]="variable" if your directive has an input. You can see an example in stackoverflow.com/questions/54460923/… — Eliseo
– Eliseo, Commented May 3, 2019 at 12:16

Prashant Pimpale · Accepted Answer · 2019-05-03 12:40:18Z

1

Try this:

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

edited May 3, 2019 at 12:40

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered May 3, 2019 at 12:38

Shubham Sali

4822 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement custom directive inside the reactive form

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related