Angular 4 directive to manipulate input text

Question

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?

You are probably looking for a pipe. You would have to decouple the ngModel into [ngModel]="data.name | trimPipe" (ngModel)="data.name=$event" — Ploppy
– Ploppy, Commented Sep 18, 2017 at 23:18
I see your point - I'll play with pipe after, but for now I think a directive should work...just can't figure out how — TSG
– TSG, Commented Sep 18, 2017 at 23:26

Johnathan Barclay · Accepted Answer · 2021-03-16 14:32:14Z

10

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'

edited Mar 16, 2021 at 14:32

Johnathan Barclay

20.5k2 gold badges27 silver badges40 bronze badges

answered Sep 18, 2017 at 23:32

amal

3,1801 gold badge15 silver badges21 bronze badges

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

6 Comments

TSG Over a year ago

The change event triggers when leaving the field, but the value does not update (trimmed)

amal Over a year ago

try changing it to ngModelChange event (or input event as mentioned at the bottom of my answer)

TSG Over a year ago

I got it to work with the following, but it seems a bit complex: (this.el.nativeElement as HTMLInputElement).value = (this.el.nativeElement as HTMLInputElement).value.trim();

amal Over a year ago

As long as you are planning to reuse your directive on an input element this will work. What other cases would you expect a value to be trimmed?

TSG Over a year ago

I'm not sure - this was more theoritical (how to do) than practical. I'm now working on a pipe to do what I want as Ploppy suggested above.

|

Mahmoud · Accepted Answer · 2020-10-13 23:28:52Z

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)

answered Oct 13, 2020 at 23:28

Mahmoud

3014 silver badges14 bronze badges

Comments

KingMario · Accepted Answer · 2018-10-16 03:26:04Z

0

You may try this directive created by me: https://www.npmjs.com/package/ngx-trim-directive

It lies on a very simple fact that Angular listens to input event to bring the view-to-model binding into being.

answered Oct 16, 2018 at 3:26

KingMario

1912 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular 4 directive to manipulate input text

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related