Question

我正在使用Typescript项目开发Angular2。我正在尝试创建一个验证指令，因此我可以使用输入和响应的类型从Html标记发送值，并使用布尔值。

我写的指令是：

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

我将它注册在app.module.ts：

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

和html代码是：

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

我希望将值从输入传递到指令，输出将显示在span中。

代码不起作用且指令不起作用，尽管它没有出错。为什么？我的代码出了什么问题？

如何在结果范围中公开输出？

谢谢

Answer 1

在plunker

上查看

使用exportAs访问模板中的指令属性

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

        }
    }

添加指令以验证输入，Angular2和typescript

1 个答案: