Add directive to validate an input, Angular2 and typescript

Question

I am working on an Angular2 with Typescript project. I am trying to make a validation directive so I can send the value from the Html tag with the type of the input and response with a boolean value.

the directive I wrote is:

import { Directive, ElementRef, HostListener, Input, Output } from '@angular/core';

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

export class Validation{
    @Input('validate') validateType: string;
    @Input() validateValue: string;

    @Output() status:boolean;
    constructor(private el : ElementRef){
    }

    @HostListener('keyup') OnKeyUp(){
       if(this.validateType === "number")
        {
            var isNumeric = /^[-+]?(\d+|\d+\.\d*|\d*\.\d+)$/;
            this.status = isNumeric.test(this.validateValue);
        }
    }
}

and I register it in the app.module.ts:

import { Validation}            from './validation-directive/validation.directive';
.
.
.
@NgModule({
.
.,
  declarations: [
     Validation
  ],
})

and the html code is:

<input #validateNumber [validate]="number" validationValue="validateNumber.value" />
<span>result is: </span>

I want the value to be passed from the input to the directive and the output would be shown up in the span.

the code is not working and the directive is not working, although it does not give an error. why? what is wrong with my code?

and how can I expose the output in the result span?

thank you

El houcine bougarfaoui · Accepted Answer · 2017-03-14 14:15:01Z

2

See it on plunker

use exportAs to access your directive properties in your template

html:

 <input validate="number"  #validator="validator"  />

    <span>result is: {{ validator.status }}</span>

ts:

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

    @Directive({
       selector: '[validate]',
       exportAs: "validator"
    })
    export class Validation{
        @Input('validate') validateType: string;
        status : boolean;

        constructor(private el : ElementRef){
        }

        @HostListener('keyup') OnKeyUp(){

           if(this.validateType === "number")
            {
                let value = this.el.nativeElement.value;
                let isNumeric = /^[-+]?(\d+|\d+\.\d*|\d*\.\d+)$/;
                this.status = isNumeric.test(value);
            }

        }
    }

edited Mar 14, 2017 at 14:15

answered Mar 13, 2017 at 16:04

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

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

3 Comments

Samy Sammour Over a year ago

Thanks for the answer. I tried it but it is still not working. I did not know about exportAs. but still do not get an error and it is not working.

Samy Sammour Over a year ago

after some tests I found that the problem is in: #validateNumber=validation he cannot recognize it. but when i delete the validation like: <input #validateNumber /> it works but not in the same way i want

El houcine bougarfaoui Over a year ago

sorry for being late @SamySammour see the update it works for me

Collectives™ on Stack Overflow

Add directive to validate an input, Angular2 and typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related