動態控制到對象打字稿中

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() { 
    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，但是當我添加它時，控制中斷。

感謝

PD。我做了這個重複控制，但我不能爲控件設置一個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> 

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你與上面的代碼！ :)

希望這有助於！