オブジェクトのタイプコードへの動的コントロール

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

私は本当に子供を作る方法を知らない、動的にして、制御finish関数でバインドされます。 入力プロパティ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を使用しているので、コードに基づく簡単な例です。バリデーターを使用して、フォームが有効であることを確認することもできます。

フォームグループから始めて、すべてのフォームコントロールを追加します。最初のインポートに必要なものと、あなたのコンストラクタで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を作成しました！ :)

これが役に立ちます。