Объедините несколько наблюдаемых форм контроля и подписаться в реактивной форме

Question

У меня есть форма с несколькими полями ввода (например, CID, LastName, FirstName и т. Д.). Требование состоит в том, чтобы сделать один вклад в форму отправки. Поэтому при вводе ввода в любое из полей значения в полях, отличных от введенного поля, необходимо очистить

Вместо подписки значений для всех элементов управления я планирую использовать некоторые операторы в Rxjs, чтобы объединить их и использовать только одну подписку. То, что я нашел, - это последний. Так что я просто поместил все элементы управления в массив и планировал передать их оператору combLatest.

Я создал стек-блиц. https://stackblitz.com/edit/angular-xeqms6?file=src%2Fapp%2Fapp.component.ts

handleFormChanges(){

    const controlArr=[];
    for (const field in this.formControls) {
      controlArr.push(this.formEl.get(field).valueChanges);
    }

      combineLatest(controlArr)
       .pipe(map(control=>{
         startWith('')
        return control;
       }))
      .subscribe((value)=>{

        // Here I need to write the logic to clear input fields other than the current one.
        console.log(value);

      })
  }

Проблема с кодом выше заключается в том, что подписка сначала срабатывает только после того, как значения введены во все поля хотя бы один раз. Последующие триггеры работают как положено.

Что мне нужно, так это то, что при каждом вызове значения необходимо вызывать обратный вызов

Answer 1

  handleFormChanges() {
this.formEl.valueChanges
  .pipe(pairwise())
  .subscribe(([prev, current]) => {
    for (const field in prev) {
      if (prev[field] === current[field]) {
        this.formEl.get(field).setValue(null, { onlySelf: true });
      }
    }
  });

}

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