Динамические элементы управления в объекте typescript

Question

У меня есть форма, которая должна быть заполнена основным лицом, и он также может заполнить форму для своего супруга и детей. (Picture of the form) Он работал нормально до требования детей.

Я сделал эту модель:

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: "" }] 
}; 

тогда, когда кнопка Finish Форма нажата, эта функция называется:

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); 
} 

Я действительно не знаю, как сделать детей контролирует динамически, а затем быть привязанным к функции финиша. Существует входное свойство ngModel, но когда я его добавляю, управление прерывается.

Thanks

PD. Я сделал это, чтобы повторить элементы управления, но я не могу установить идентификатор элементов управления, поэтому я теряю ссылку. Когда я сделал это, дети был массив, и + и - кнопка выталкивает и удалять объекты из массива

     <ul style="list-style-type:decimal"> 
          <li *ngFor="let child of children" style="display:list-item"> 

           <table> 
            <tr> 
             <td> 
              <md-input textoLabel="Apellido" type="text" [disabled]="esModoVisualizacion()" 
                 placeholder="Apellido" 
                 style="width:130px;"></md-input> 
             </td> 
             <td> 
              <md-input .. 
               . 
               . 
           </table> 
          </li> 
         </ul> 

Answer 1

Как уже упоминалось в комментариях, я хотел бы предложить вам использовать динамическую форму, которая позволит вам иметь хороший объект для работы и извлечения значений:

Таким образом, упрощенный пример, основанный на вашем коде, с использованием FormGroup, FormControl и FormArray. Вы также можете использовать валидаторы, чтобы проверить, что ваша форма действительна.

Итак, начните с FormGroup, где вы добавите все свое управление formcontrol. Первый импорт необходимых вещей и привнести FormBuilder в конструкторе:

import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms'; 

constructor(private fb: FormBuilder) { } 

Затем построить формы

patientForm: FormGroup; 

ngOnInit() { 
    this.patientForm = this.fb.group({ 
    firstname: ['', [Validators.required]], // add different validators 
    lastname: [''] 
    children: this.fb.array([ // create an FormArray for children 
     this.initChildren() 
    ]) 
    }); 
} 

Затем построить вам FormArray для детей и способ для добавления нового ребенка в вашей форме:

initChildren() { 
    return this.fb.group({ // create a new group for children 
    firstname: [''] 
    }) 
} 

addChild() { // adds a new formcontrol to your children formarray 
    const control = <FormArray>this.patientForm.controls['children']; 
    control.push(this.initChildren()) 
} 

Затем создайте свою фактическую форму на виде:

<form [formGroup]="patientForm" (ngSubmit)="submit(patientForm.value)"> <!-- add formgroup --> 
    <label>Patient firstname: </label> 
    <input formControlName="firstname"/> <!-- all fields need corresponding formcontrol name --> 
    <label>Patient lastname: </label> 
    <input formControlName="lastname"/> 

    <div formArrayName="children"> <!-- Your formarray and below iterate the array --> 
    <div *ngFor="let child of patientForm.controls.children.controls; let i = index" > 
     <div formGroupName="{{i}}"> <!-- All children need unique formControl, here we used index --> 
     <label>Child {{i+1}} firstname: </label> 
     <input formControlName="firstname" /> 
     </div> 
    </div> 
    </div> 
</form> 

Таким образом, вы получите хороший объект для работы и может избавиться от всех [(ngModel)], что делает вашу жизнь намного проще;)

С выше кодой при представить вам бы в конечном итоге с объектом, как так:

{ 
    "firstname": "", 
    "lastname": "", 
    "children": [ 
    { 
     "firstname": "" 
    } 
    ] 
} 

Это link может быть полезным, эта связь в основном показывает пример, который я создал для вас, но с дополнительными пояснениями, и я также создал Plunker для вас с указанным кодом! :)

Надеюсь, это поможет!