Dynamische Kontrollen in Objekt Typoskript

Question

Ich habe ein Formular, das von einer Hauptperson ausgefüllt werden muss, und er kann auch das Formular für seinen Ehepartner und Kinder ausfüllen. (Picture of the form) Es funktionierte gut bis die Kinderanforderung.

Ich habe dieses Modell:

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

dann, wenn die Schaltfläche Fertig Formular geklickt wird, diese Funktion aufgerufen wird:

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

Ich weiß nicht wirklich, wie die Kinder steuert dynamisch zu machen und dann in der Zielfunktion gebunden sein. Es gibt eine Eingabeeigenschaft ngModel, aber wenn ich sie hinzufüge, bricht die Kontrolle ab.

Danke

PD. Ich habe dies gemacht, um die Kontrollen zu wiederholen, aber ich kann keine ID zu den Kontrollen setzen, also verliere ich die Referenz. Als ich das tat, waren Kinder ein Array und + und - Taste drückt und Entfernen von Objekten aus dem Array

     <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

Wie in Kommentar erwähnt, würde ich vorschlagen, dass Sie dynamische Form verwenden, die Sie lassen würde ein schönes Objekt haben mit Werten arbeiten und extrahieren:

Also ein vereinfachtes Beispiel basierend auf Ihrem Code, mit FormGroup, FormControl und FormArray. Sie können auch Validatoren verwenden, um zu überprüfen, ob Ihr Formular gültig ist.

Beginnen Sie also mit einer FormGroup, wo Sie alle Ihre Formularsteuerung hinzufügen. Ersteinfuhr notwendige Dinge und injizieren Formbuilder in Ihrem Konstruktor:

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

constructor(private fb: FormBuilder) { } 

Dann baut Form

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

Dann sind Sie FormArray für Kinder und Verfahren bauen für das Hinzufügen neues Kindes in Ihrer Form:

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

Dann erstellen Sie Ihr aktuelles Formular in der Ansicht:

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

So kann man ein schönes Objekt erhalten, mit zu arbeiten und kann von allen [(ngModel)] loszuwerden, die so viel einfacher Ihr Leben macht;)

Mit dem obigen Code auf senden, die Sie wie so mit einem Objekt enden würden:

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

diese link könnte hilfreich sein, diese Verbindung im Grunde zeigt das Beispiel, das ich für Sie erstellt habe, aber mit weiteren Erklärungen, und ich schaffte auch ein Plunker für Sie mit dem obigen Code! :)

Hoffe, das hilft!