Angular Forms - получение того, что изменилось из ValueChange - PullRequest
Новая
       12

Angular Forms - получение того, что изменилось из ValueChange

0 голосов
/ 23 сентября 2019

Я использую реактивные формы Angular, и я нахожусь на пути к реализации функциональности Undo / Redo.

То, что я хотел бы, это "упаковать" последовательные изменения в одном поле в одну отменудействие.Я думаю, что для достижения этой цели мне потребуется вычислить некоторую дельту, возможно, с использованием библиотеки различий (например, this ).

Позвольте мне объяснить это на примере:

  • пользователь меняет поле «имя» на «Том»
  • пользователь выбирает поле «фамилия» на «кот»
  • пользователь меняет «имя»поле "Джерри", пишет очень медленно или выходит и входит в поле несколько раз.
  • пользователь нажимает Отменить.

Я хочу, чтобы действие Отмена восстановило "Том"значение в поле «имя», не пропуская значения «Джерр», «Джер» и т. д.

Это может быть сделано только при подключении к form.valuechange с помощью наблюдаемых преобразований или есть какая-то альтернативалучше подходит для этой задачи?

У меня нет кода для обмена, потому что в настоящее время я просто изучаю, как реализовать эту функцию, поэтому, пожалуйста, избавьте меня от мантры "покажи нам, что у тебя есть";)

Спасибо!

1 Ответ

1 голос
/ 23 сентября 2019

Вы можете добиться с помощью операторов rxjs debounce и pairswise, например 

formControl=new FormControl('')

this.formControl.valueChanges.pipe(
    startWith(this.fromControl.value),
    debounceTime(500),
    pairwise())
    .subscribe(([old,value])=>{
      console.log(old,value)
    })

См. stackblitz

Или использовать только debounceTime 

this.formControl.valueChanges.pipe(
        debounceTime(500),
        .subscribe((res)=>{
          this.myLog.push(res)
        })
...