I am currently developing a project in Angular2 using Typescript. My goal is to create a validation directive that can take the value from an HTML tag, determine its type based on the input, and then return a boolean response.
The directive I have written looks like this:
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);
}
}
}
In my app.module.ts file, I registered the directive as follows:
import { Validation} from './validation-directive/validation.directive';
.
.
.
@NgModule({
.
.,
declarations: [
Validation
],
})
The corresponding HTML code for implementing this directive is:
<input #validateNumber [validate]="number" validationValue="validateNumber.value" />
<span>result is: </span>
My issue is that the code is not functioning properly and the directive does not seem to be working, even though there are no errors being displayed. What could be wrong with my code? And how can I display the output in the `span` element?
Your help is greatly appreciated.