title: Angular 5 reactive form- updating formControl through the html does not update the value, only the control
body: <p>I have a service with a FormGroup named mainForm-</p>
  
  <pre><code>export class DepositFormDataService{
  
    this.mainForm = this.formBuilder.group({
              title: ['', Validators.required],
              category: '',
              type: '',
              languages: this.formBuilder.array([]),
          });
      }
  
      get title(): FormControl{
          return this.mainForm.get('title') as FormControl;
      }
  }
  </code></pre>
  
  <p>In a component I use this service-</p>
  
  <pre><code> constructor(public depositFormDataService: DepositFormDataService) {}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;input matInput [formControl]="depositFormDataService.title"&gt;
  </code></pre>
  
  <p>When the user writes "b" for example I see in the debug a difference if I look on the FormGroup depositFormDataService.mainForm:</p>
  
  <p>in: Controls --> title --> value = b</p>
  
  <p>in: value --> title --> null</p>
  
  <p>Why?</p>
  
  <p>I found this post in git-
  <a href="https://github.com/angular/angular/issues/13792" rel="nofollow noreferrer">https://github.com/angular/angular/issues/13792</a></p>
  
  <p>I tries to do this hack in the component-</p>
  
  <pre><code>ngOnInit() {
      this.onChanges();
  }
  
  onChanges(): void {
      this.depositFormDataService.title.valueChanges
          .pipe(takeUntil(this.titleDestroy))
          .subscribe(value =&gt; {
              this.depositFormDataService.mainForm.get('title').patchValue(value, {emitEvent: false});
  }
  </code></pre>
  
  <p>But it did not work and the value was still "null".</p>
  
  <p>Any idea how to make the value be sync with the value inside the controls?</p>
  
  <p>It causes a strange problem that depositFormDataService.mainForm.status differs from the depositFormDataService.title.status.</p>