FormGroup valueChanges возвращает то же значение, если вы редактируете один FormControl из другого

Question

(проверено на Angular 8.2.9)

Привет, я пытался отредактировать одно поле на основе другого с помощью реактивных форм, а также подписаться на все FormGroup.valueChanges. Мое наблюдение пришло к тому, что если я сделаю изменение, основанное на FormControl.valueChanges, на другое FormControl.setValue, я получу два одинаковых изменения от FormGroup. Наоборот, если я просто выполню два раза setValue на обоих FormControl с, то результат будет таким же, как принятый.

Пример кода:

import {Component} from '@angular/core';
import {FormBuilder} from '@angular/forms';

@Component({
  selector: 'app-myform',
  template: '',
})
export class MyformComponent {

  form = this.builder.group({
      a: '',
      b: '',
    });

  constructor(private builder: FormBuilder) {
    this.form.get('a').valueChanges.pipe(
    ).subscribe((change) => {
      this.form.get('b').setValue('second');
      console.log(`a = ${change}`);
    });

    this.form.get('b').valueChanges.subscribe((change) => {
      console.log(`b = ${change}`);
    });

    this.form.valueChanges.subscribe((change) => {
      console.log(`obj = ${JSON.stringify(change)}`);
    });

    this.form.get('a').setValue('first');
    this.form.get('b').setValue('third');
  }

}

И результат:

b = second 
obj = {"a":"first","b":"second"} 
a = first 
obj = {"a":"first","b":"second"} 
b = third 
obj = {"a":"first","b":"third"} 

Что бы я ожидал:

b = second 
obj = {"a":"first","b":""} 
a = first 
obj = {"a":"first","b":"second"} 
b = third 
obj = {"a":"first","b":"third"} 

Если я уберу строку this.form.get('b').setValue('second');, она будет вести себя так, как я ожидал:

a = first
obj = {"a":"first","b":""} 
b = third
obj = {"a":"first","b":"third"}

Интересно, что вызывает этоповедение и работает ли он так, как ожидалось, или должен представлять угрозу.