title: Angular 4 - Populate form with JSON data is not working
body: <p>I have to edit data from a client. I have a form, in which I click on a button and redirects to a Form, in I want it to display the data of that client that I've just clicked. 
  Thing is, the form builder does not work when I try to associate each key to its value.</p>
  
  <p>However, if I write down the name myself, like, hardcoded, the form builder works like a charm!.</p>
  
  <p><em>edit-component.ts</em></p>
  
  <pre><code>import { FuncionForm } from './../../interfaces/funcion_form';
  import { FuncionService } from './../../services/funcion.service';
  import { Combobox } from './../../interfaces/combobox';
  import { ComboboxService } from './../../services/combobox.service';
  import { Formulario } from './../../interfaces/formulario';
  import { HttpClient } from '@angular/common/http';
  import { SharedService } from './../../services/shared-service.service';
  import { Component, OnInit } from '@angular/core';
  import { Funcion } from '../../interfaces/funcion';
  import {
    FormGroup,
    Validators,
    FormBuilder,
    FormControl,
    FormsModule,
    ReactiveFormsModule
  } from '@angular/forms';
  
  @Component({
  selector: 'app-editar-funcion',
  templateUrl: './editar-funcion.component.html',
  styleUrls: ['./editar-funcion.component.css']
  })
  export class EditarFuncionComponent implements OnInit {
  
  funcionCD:                number;
  dadosFormulario :         FuncionForm;
  funcionFormGroup:         FormGroup;
  comboboxProfisArray :     Combobox;
  comboboxAgrupProfArray :  Combobox;
  comboboxAgrupCategArray : Combobox;
  comboboxNacionArray :     Combobox;
  myForm :                  FormGroup;  
  
   constructor(private sharedService : SharedService,
            private funcionService : FuncionService,
            private funcionFormBuilder: FormBuilder,
            private comboboxService: ComboboxService) 
   {}
  
  ngOnInit() { 
  
  this.sharedService.currentClientCD.subscribe(message =&gt; this.funcionCD = message); // Service to get the client ID
  
  this.funcionService.GetDadosCliente(this.funcionCD).subscribe(
    (res:FuncionForm) =&gt; {
      this.dadosFormulario = res; // Interface to define a client
  
  
  // This works!
  this.myForm = new FormGroup({ 
    nome :          new FormControl("A name"),
    dt_nasc :       new FormControl("1998-02-25"),
    sexo :          new FormControl("0"),
    cd_nacion :     new FormControl("PT"),
    cd_agrup_prof : new FormControl("M"),
    cd_profis :     new FormControl("M"),
    cd_categ :      new FormControl("M"),
    loc_trab :      new FormControl("A company") 
    // This works!
  
    /* This doesn't!
   this.myForm = new FormGroup({ 
    nome :          new FormControl(this.dadosFormulario[0].nome),
    dt_nasc :       new FormControl(this.dadosFormulario[0].dt_nasc),
    sexo :          new FormControl(this.dadosFormulario[0].sexo),
    cd_nacion :     new FormControl(this.dadosFormulario[0].cd_nacion),
    cd_agrup_prof : new FormControl(this.dadosFormulario[0].cd_agrup_prof),
    cd_profis :     new FormControl(this.dadosFormulario[0].cd_profis),
    cd_categ :      new FormControl(this.dadosFormulario[0].cd_categ),
    loc_trab :      new FormControl(this.dadosFormulario[0].loc_trab) 
     */
  
   })      
  }
  </code></pre>
  
  <p><em>edit-component.html</em></p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;h1&gt;Editar dados do funcionário&lt;/h1&gt;
   &lt;hr&gt;
   &lt;div class="card"&gt;
   &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3" id="col-img"&gt;
          &lt;img src="/img/1"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-9" id="col-dados"&gt;
        &lt;form class="form-horizontal" role="form" [formGroup]="myForm"&gt;
  
        &lt;!-- 
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-12 col-form-label"&gt;Local de trabalho&lt;/label&gt;
              &lt;div class="col-md-12"&gt;
                &lt;input formControlName="loc_trab" type="text" class="form-control"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        --&gt;
          &lt;div class="form-group row"&gt;
          &lt;label class="col-md-12 col-form-label"&gt;Nome&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;input formControlName="nome" type="text" class="form-control"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
          &lt;label class="col-md-12 col-form-label"&gt;Data de nascimento&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;input formControlName="dt_nasc" type="date" class="form-control"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-12 col-form-label"&gt;Género&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;select formControlName="sexo" type="text" class="form-control"&gt;
                &lt;option value="0"&gt;Masculino&lt;/option&gt;
                &lt;option value="1"&gt;Feminino&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-12 col-form-label"&gt;Nacionalidade&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;select formControlName="cd_nacion" type="text" class="form-control"&gt;
                &lt;option *ngFor="let row of comboboxNacionArray" value="{{ row.cd }}"&gt;{{ row.nome }}&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-12 col-form-label"&gt;Agrupamento Profissional&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;select formControlName="cd_agrup_prof" type="text" class="form-control"&gt;
                &lt;option *ngFor="let row of comboboxAgrupProfArray" value="{{ row.cd }}"&gt;{{ row.nome }}&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-12 col-form-label"&gt;Profissão&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;select formControlName="cd_profis" type="text" class="form-control"&gt;
                &lt;option *ngFor="let row of comboboxProfisArray" value="{{ row.cd }}"&gt;{{ row.nome }}&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;  
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-12 col-form-label"&gt;Categoria Profissional&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;select formControlName="cd_categ" type="text" class="form-control"&gt;
                &lt;option *ngFor="let row of comboboxAgrupCategArray" value="{{ row.cd }}"&gt;{{ row.nome }}&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
            &lt;label class="col-md-12 col-form-label"&gt;Local de trabalho&lt;/label&gt;
            &lt;div class="col-md-12"&gt;
              &lt;input formControlName="loc_trab" type="text" class="form-control"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
            &lt;div class="col-md-12" style="padding-top: 15px;"&gt;
                &lt;button style="border-radius: 50px; float:right;" type="submit" class="btn btn-primary"&gt;Submeter&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><em>Some screnshots</em></p>
  
  <p><a href="https://i.stack.imgur.com/Zbjfv.png" rel="nofollow noreferrer">Working</a></p>
  
  <p><a href="https://i.stack.imgur.com/zKgce.png" rel="nofollow noreferrer">Not working</a></p>
  
  <p>I've searched everywhere and couldn't find a solution.
  All help is apreciated!</p>
  
  <p>PS: the JSON data comes like this. Thats why the "0" in <strong>this.dadosFormulario[0]</strong></p>
  
  <pre><code>[
    {
      "nome": "MY NAME",
      "dt_nasc": "1978-05-26T00:00:00",
      "sexo": "0",
      "cd_nacion": "2", 
      "cd_agrup_prof": null,
      "cd_profis": "1",
      "cd_categ": "TS",
      "loc_trab": ""
     }
   ] 
  </code></pre>