Угловые 7 реактивных форм связывания перехвата - PullRequest
Новая
       33

Угловые 7 реактивных форм связывания перехвата

0 голосов
/ 09 февраля 2019

Я хочу отформатировать данные (предоставленные пользователем) в свой собственный формат или изменить их на лету (например, установить 0, когда пользователь вводит значение меньше 0 или что-то в этом роде).Я в основном использую решение для реактивных форм, чтобы связать представление с кодом позади.То, что я сделал, перехватил мою привязку между переменной типа FormControl и элементом управления в представлении благодаря директиве.Я хотел бы остановиться на этом, но проблема в том, что директива не является реальным перехватчиком, поскольку событие изменения значения происходит с неправильным значением, а затем форматируется с помощью функции директивы (событие изменения вызывается во второй раз).Вот как я добился этого: 

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

Есть ли способ достичь реального поведения перехвата с помощью директив?

РЕДАКТИРОВАТЬ: Я создал простой примермоего дела.Пожалуйста, взгляните.Я хочу добиться только одного (второго) вызова события изменения.

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

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Итак, директива не поможет вам здесь, но вы можете использовать тот факт, что valueChanges равен Observable и сделать чистое и приятное решение на основе этого,Как правило, вы можете использовать map + tap operator , чтобы отобразить ваши изменения и вернуть им ввод до подписки .Пример: 

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);
});

Рабочий Пример стекаблика .Надеюсь, это поможет.

0 голосов
/ 09 февраля 2019

Jaume, в конструкторе директивы вы можете внедрить ElementName и сам элемент управления, если директива применяется к элементу управления вводом 

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

Таким образом, вы можете добавить ове-ввод HotListener поверх фокуса,слишком размыто ... 

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