Javascript 将动态控件转换为对象类型脚本

我有一张表格，必须由一个主要的人填写，他也可以为他的配偶和孩子填写表格。 在孩子们提出要求之前，它一直运转良好

我制作了这个模型：

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

我真的不知道如何使子控件动态地绑定到finish函数中。 有一个输入属性ngModel，但当我添加它时，控件中断

谢谢

警察局。我这样做是为了重复控件，但我无法为控件设置id，因此我丢失了引用。当我这样做时，子对象是一个数组，并且+和-按钮从数组中按下并移除对象

                        <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>

如评论中所述，我建议您使用动态表单，这将使您有一个很好的对象来处理和提取值：

下面是一个基于代码的简化示例，使用
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())
}

这可能会有帮助，这个链接基本上显示了我为您创建的示例，但有进一步的解释，我还使用上面的代码为您创建了一个示例！：）

希望这有帮助
 你的
finish
函数看起来像是一场噩梦，需要维护：D我建议你看看，你可以使用表单创建的对象来处理表单数据，而不是使用你现在使用的大量变量。这是我的建议：）非常感谢！我考虑到模型有很多行为，并且必须保持一致，所以我创建了一个类Person，并将该对象放入模型中
<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>

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