title: Dynamic controls into object typescript
body: <p>I got a form, which must be filled by a main person, and he can also fill the form for his spouse and children. 
  <a href="https://i.stack.imgur.com/VRmnd.jpg" rel="nofollow noreferrer">(Picture of the form)</a>
  It was working fine until the children requirement. </p>
  
  <p>I made this model:</p>
  
  <pre><code>export class RequestForm{
  
   model = {
      main: { apellido: "", nombre: "", documento: "", sexo: "", fechaNacimiento: "", localidad: "", calle: 0, piso: 0, depto: 0, edificio: 0, telefono: "", celular: "", mail: "" },
      spouse: { apellido: "", nombre: "", documento: "", sexo: "", fechaNacimiento: "", localidad: "", calle: 0, piso: 0, depto: 0, edificio: 0, telefono: "", celular: "", mail: "" },
      children: [{ apellido: "", nombre: "", documento: "", sexo: "", fechaNacimiento: "", localidad: "", calle: 0, piso: 0, depto: 0, edificio: 0, telefono: "", celular: "", mail: "" }]
  };
  </code></pre>
  
  <p>then, when Finish Form button is clicked, this function is called: </p>
  
  <pre><code> finish() {
      this.model.main= {
          apellido: this.titularApellido.value, nombre: this.titularNombre.value, documento: this.titularDocumento.value
          , sexo: this.titularSexo.value, fechaNacimiento: this.titularFechaNacimiento.value, localidad: this.titularLocalidad.value
          , calle: this.titularCalle.value, piso: this.titularPiso.value, depto: this.titularDepto.value, edificio: this.titularEdificio.value
          , telefono: this.titularTelefono.value, celular: this.titularCelular.value, mail: this.titularMail.value
      };
  
      this.model.spouse = {
          apellido: this.conyugeApellido.value, nombre: this.conyugeNombre.value, documento: this.conyugeDocumento.value
          , sexo: this.conyugeSexo.value, fechaNacimiento: this.conyugeFechaNacimiento.value, localidad: this.titularLocalidad.value
          , calle: this.titularCalle.value, piso: this.titularPiso.value, depto: this.titularDepto.value, edificio: this.titularEdificio.value
          , telefono: this.conyugeTelefono.value, celular: this.conyugeCelular.value, mail: this.conyugeMail.value
      };       
  
      this.persistPerson(this.model.main);
      this.persistPerson(this.model.spouse);
  }
  </code></pre>
  
  <p>I dont really know how to make the children controls dynamically and then be binded in the finish function. 
  There is an input property ngModel but when I add it, the control breaks.</p>
  
  <p>Thanks</p>
  
  <p>PD. I made this to repeat the controls, but I cant set an id to the controls, so I lose the reference. When I did this, children was an array, and + and - button pushes and remove objects from the array</p>
  
  <pre><code>                        &lt;ul style="list-style-type:decimal"&gt;
                              &lt;li *ngFor="let child of children" style="display:list-item"&gt;
  
                                  &lt;table&gt;
                                      &lt;tr&gt;
                                          &lt;td&gt;
                                              &lt;md-input textoLabel="Apellido" type="text" [disabled]="esModoVisualizacion()"
                                                        placeholder="Apellido"
                                                        style="width:130px;"&gt;&lt;/md-input&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;
                                              &lt;md-input ..
                                                .
                                                .
                                  &lt;/table&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
  </code></pre>