美文网首页
angular7项目中开箱即用的指令

angular7项目中开箱即用的指令

作者: luckyvip | 来源:发表于2019-12-11 10:24 被阅读0次

1、去除input首尾的空格

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

import { FormGroup, FormControl, NgControl } from '@angular/forms';

@Directive({

  // tslint:disable-next-line:directive-selector

  selector: '[input-noSpace]'

})

export class InputNoSpaceDirective {

  constructor(private elementRef: ElementRef, private control: NgControl) {

  }

  @HostListener('keydown', ['$event'])

  keydownFun(evt) {

    if (evt.key.trim() === '') {

      evt.preventDefault();

    }

  }

  @HostListener('keyup', ['$event', '$event.target'])

  keyupFun(evt, target) {

    if (target.value) {

      this.control.control.setValue(target.value.replace(/(\s*)/g, ''));

    }

  }

}

2、input限制仅数字输入

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

import { HostListener } from '@angular/core';

@Directive({

  // tslint:disable-next-line:directive-selector

  selector: '[input-number]'

})

export class NumberinputDirective {

  constructor(element: ElementRef) {}

  @HostListener('input', ['$event'])

  onInput(event) {

    const inputValNumber = /^[0-9]*$/;

    if (inputValNumber.test(event.target.value) === false) {

      event.target.value = '';

    }

  }

}

相关文章

网友评论

      本文标题:angular7项目中开箱即用的指令

      本文链接:https://www.haomeiwen.com/subject/mxhogctx.html