Angular X directive: the best way to handle ngModel value change

Question

I have such directive, which handles onBlur/onFocus changes and adds $ symbol to the beginning of the input value:

@Directive({
  selector: "[inputChanger]",
  host: {
    "(focus)": "onFocus($event)",
    "(blur)": "onBlur($event)"
  }
})
export class InputChangerDirective implements OnChanges {
  @Input("inputChanger") type: string;

  @Input() serverValue: string;

  constructor(private model: NgModel, private el: ElementRef) {}

  ngOnChanges(changes) {
    if (changes.serverValue && changes.serverValue.currentValue) {
      setTimeout(() => {
        this.el.nativeElement.dispatchEvent(new Event("blur"));
      });
    }
  }

  onFocus(element: any) {
    element.target.value = this.model.model || "";
  }

  onBlur(element: any) {
    if (Number(this.model.model)) {
      element.target.value = "$" + Number(this.model.model);
    }
  }
}

I need to add this $ somehow when i blur my input or when data from the server comes... I've done it a bit tricky... I added a new input serverValue which is equal to servers response value and listen to it in directive.

But I think it's a bad way.

Maybe there are any better ways to populate input, listen for changes of ngModel and format it?

You can check my sandbox here: https://codesandbox.io/s/18qlqny42q to get a clear vision of what I try to do...

why not use a filter/pipe, when you receive the resp run the value through the pipe. — alphapilgrim, Aug 14 '18 at 16:23
Possible duplicate of [AngularJS: in a input how to show '$50,000.00' when no focused but show '50000' when focused？](https://stackoverflow.com/questions/23930210/angularjs-in-a-input-how-to-show-50-000-00-when-no-focused-but-show-50000) — alphapilgrim, Aug 14 '18 at 16:24
@alphapilgrim becouse i don't have to change ngModel's value, only representation — brabertaser19, Aug 14 '18 at 16:33
while it's not angular js, the code for the directive still holds value. you question header literally says ngModel value change. — alphapilgrim, Aug 14 '18 at 16:35
@alphapilgrim please check sample code... I think you don't get my idea... — brabertaser19, Aug 14 '18 at 20:09

score 0 · Answer 1 · answered Aug 14 '18 at 16:25

0

You can use pipe to format the input value. Something like this

<input type="text" (ngModel)="model" [value]="text | pipe" />

answered Aug 14 '18 at 16:25

Suresh Kumar Ariya

9,516
1
18
27

Angular X directive: the best way to handle ngModel value change

1 Answers1