FormControl default behaviour:

When you change one input, it sets the underlying value, but its twin field isn't updated, even though they're bound to the same source. Try typing in one box, then the other.

These two controls are bound to the same formControl

Value of Name:

These two controls are bound to the same formControlName in a FormGroup

Value of Age:

After applying a hack

We'll put on this stupid hack that lets each control be aware that its twin has changed:

ngOnInit(): void {
    // Form field subscribes to self
    // In FormGroup
    this.anotherForm.controls.scoops.valueChanges.subscribe(value => {
      this.anotherForm.controls.scoops.setValue(value, {
        onlySelf: true, emitEvent: false, emitModelToViewChange: true
      });
    }, error => { }, () => { });

    // Standalone FormControl
    this.flavour.valueChanges.subscribe(value => {
      this.flavour.setValue(value, {
        onlySelf: true, emitEvent: false, emitModelToViewChange: true
      });
    }, error => { }, () => { });
  }

These two controls are bound to the same formControl

Value of Flavour:

These two controls are bound to the same formControlName in a FormGroup

Value of Scoops: