title: Angular FormControl data is not updating from the view
body: <p>I am trying to read the data from a FormGroup with ReactiveFormsModule. However, I am having trouble, and the value of the form's fields is always empty.</p>
  
  <p>I have a route loading a submodule 'ByHModule' and in this one another route for each component. In this case 'cartera'</p>
  
  <pre><code>...
  path: 'Cartera',
  component: CarteraComponent,
  ...
  </code></pre>
  
  <p>I have loaded the FormsModule and the ReactiveFormsModule in the byh.modules.ts which routes to the 'Cartera' component. Once loaded it shows a form with one text input and one textarea. I want to get the data of the form when it is submitted.</p>
  
  <p>The code of the CarteraComponent is as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'ngx-byh-cartera',
    templateUrl: 'byh-cartera.component.html',
    styleUrls: ['./byh-cartera.component.scss'],
  })
  export class CarteraComponent implements OnInit{
  
    nuevaCarteraForm: FormGroup;
    ngOnInit(){
      this.nuevaCarteraForm = this.fb.group({
        nombre: [''],
        extra: ['']
        });
    }
    constructor(private fb: FormBuilder){
  
    }
  
    onSubmit(){
      console.log(JSON.stringify(this.nuevaCarteraForm.value));
    }
  }
  
  
  </code></pre>
  
  <p>The 'byh-cartera.component.html':</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-6"&gt;
          &lt;nb-card&gt;
              &lt;nb-card-header&gt;&lt;/nb-card-header&gt;
              &lt;nb-card-body&gt;
                  &lt;form [formGroup]= "nuevaCarteraForm" (ngSubmit)="onSubmit()" novalidate&gt;
  
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" nbInput fullWidth placeholder="Nombre de la cartera" FormControlName="nombre"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="input-group"&gt;
                          &lt;textarea rows="5" nbInput fullWidth placeholder="Comentarios" FormControlName="extra"&gt;{{nuevaCarteraForm.value | json}}&lt;/textarea&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" class="btn btn-danger" &gt;Crear&lt;/button&gt;
  
                  &lt;/form&gt;
              &lt;/nb-card-body&gt;
          &lt;/nb-card&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on Submit the console shows: {"nombre":"","extra":""} not matter what I write in the forms.</p>