Angular 7 reactive forms binding intercepting

Question

I want to format data (provided by user )to my own format or change them on the fly (eg. set 0 when user put a value lower than 0 or something like that). I mostly use a reactive forms solution to connect view with code behind. What I've done it by intercepting my binding between the variable of FormControl type and the control on the view thanks to a directive. I would like to stay with this but the problem is that the directive isn't real interceptor as a value change event occurs with wrong value and then is formatted by directive function (the change event is called second time). This is how I achieved that:

@HostListener("blur", ["$event.target.value"])onBlur(event: any) {
    let value = this.transformValue(event);
    this.control.setValue(value, { emitEvent: false });
    this.el.value = value;
}

Is there a way to achieve the real interception behaviour through directives?

EDIT: I've created a simple sample of my case. Please, take a look. What I want to achieve is only one (second) change event call.

https://stackblitz.com/edit/angular-ctnjup

Could you check please what is called first? Your directive handler or your data change handler? — Amir Arbabian
– Amir Arbabian, Commented Feb 9, 2019 at 14:44
Hi, definately data change handler is being called first. Take a look at my stackblitz's sample (look at the edited part of the post). — Jaume
– Jaume, Commented Feb 9, 2019 at 16:33

Amir Arbabian · Accepted Answer · 2019-02-09 18:24:45Z

4

So, directive won't help you here, but, you can use that fact that valueChanges is Observable and make a clean and nice solution based on that. Basically you can use map + tap operators to map your changes and set them back to input before subscription. Example:

this.sub$ = this.formControl.valueChanges.pipe(
  map(x => x === "" ? 0 : parseFloat(x) || 0),
  tap(x => this.formControl.setValue(x, {emitEvent: false}))
).subscribe(x => {
  console.log("change: " + x);
  this.changes.push(x);
});

Working stackblitz example. Hope that helps.

answered Feb 9, 2019 at 18:24

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

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

Comments

Eliseo · Accepted Answer · 2019-02-09 14:50:32Z

0

Jaume, in the constructor of a directive you can inject the ElementName and the control itself if the directive is applied to a input control

constructor(private elementRef: ElementRef,private control:NgControl) {
   //this.control was the control itself
}

So, you can add HotListener ove input, over focus,over blur...

@HostListener("blur", ["$event.target.value"])onBlur(event: any) {
    let value = this.transformValue(event);
    this.control.setValue(value, { emitEvent: false });
    this.el.value = value;
}

answered Feb 9, 2019 at 14:50

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

1 Comment

Jaume Over a year ago

Hello, take a look at the link in the edited part of the post. I'm doing exactly how you described.

Collectives™ on Stack Overflow

Angular 7 reactive forms binding intercepting

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related