Angular FormControls suck

fix-ng-on-init.ts

  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 => { }, () => { });

  }

form-test.component.html

<p>form-test works!</p>

<div class="mv2 pa1 ba">
    <p>These two controls are bound to the same <code>formControl</code></p>
    <label>Name:<input [formControl]="yourName" placeholder="Name"></label>
    <label>Echo:<input [formControl]="yourName" placeholder="Name"></label>
    <p>Value of Name: {{yourName.value}}</p>
</div>

<div class="mv2 pa1 ba">
    <form [formGroup]="aForm">
        <p>These two controls are bound to the same <code>formControlName</code> in a FormGroup</p>
        <label>Age:<input formControlName="age" placeholder="Age"></label>
        <label>Echo:<input formControlName="age" placeholder="Age"></label>
        <p>Value of Age: {{aForm.controls.age.value}}</p>
    </form>
</div>

form-test.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-form-test',
  templateUrl: './form-test.component.html',
  styleUrls: ['./form-test.component.css']
})
export class FormTestComponent implements OnInit {

  yourName : FormControl = new FormControl('');

  aForm = new FormGroup({
    age: new FormControl()
  });

  constructor() { }

  ngOnInit(): void {
  }

}