Angular 4 directive to manipulate input text

15,273

Solution 1

Change your directive to

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

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

export class InputTextFilterDirective {
  @Input() ngModel: string;

  constructor(private el: ElementRef) {
    console.log('constructed InputTextFilterDirective');
    (el.nativeElement as HTMLInputElement).value = '';
  }

  @HostListener('change')
  onChange() {
    console.log('in change InputTextFilterDirective');
    (this.el.nativeElement as HTMLInputElement).value.trim();
    console.log(this.ngModel);
  }
}

Try and see if that works. If it didn't, try changing the event from 'change' to 'input' or 'ngModelChange'

Solution 2

Here you go:

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

@Directive({
    selector: '[trim-text]'
})
export class TrimTextDirective {
    constructor(
        private el: ElementRef,
    ) {}

    @HostListener('blur')
    // @HostListener('input')
    @HostListener('change')
    applyTrim() {
        let ele = this.el.nativeElement as HTMLInputElement;
        if (typeof ele.value === 'string') {
            ele.value = ele.value.trim();
        }
    }
}

If you uncomment "@HostListener('input')" you wont be able to write spaces (in case you want to trim the sides and allow having spaces in between)

Share:
15,273
TSG
Author by

TSG

Telium Support Group (TSG): In addition to asking questions, we try to answer questions relating to Telematics and Telephony. Opinions expressed on Stack Exchange represent the views of Telium employees and may reflect an understanding of and bias for Telium products. (i.e. yes our views may be biased - but we try hard to keep opinions neutral!). If you have a question about a Telium product we prefer not to answer on stack exchange - please email us at [email protected] We are happy to answer your questions regarding Telium products and services.

Updated on August 08, 2022

Comments

  • TSG
    TSG over 1 year

    I have created a simple directive to trim my input text (I plan to expand it's functionality later - so please don't recommend a simple onkeyup function), I would like to make a directive work.

    I use my directive like this:

        <input type="text" class="form-control" inputTextFilter [(ngModel)]="data.name">
    

    and my directive is as follows:

    import { Directive, HostBinding, HostListener } from '@angular/core';
    
    @Directive({
      selector: '[inputTextFilter]'
    })
    
    export class InputTextFilterDirective {
      value: string;
    
      constructor() {
        console.log('contrusted InputTextFilterDirective');
        this.value = '';
      }
    
      @HostListener('change')
      onChange($event) {
        console.log('in change InputTextFilterDirective');
        this.value = $event.target.value.trim();
        console.log(this.value);
      }
    }
    

    I see the constructor message log to the window, but the on change message never appears, and my value never changes (spaces aren't trimmed from end). I suspect hostListeners and hostProperties aren't right as I've seen lots of conflicting examples...but can't confirm a right way.

    What's wrong with this?