title: Create Form data driven for a class that have an array of the same class type
body: <p>I am building a form for the class Operation.</p>
  
  <pre><code>export class Operation { constructor(public name: string, public inputs: CustomInput[] = [],
            public outputs: CustomOutput[] = [], public wsdlPath: string ) {} }
  </code></pre>
  
  <p>It seems good but the problem that CustomInput has an attribute children which has an array of CustomInput type.</p>
  
  <pre><code>export class CustomInput { constructor(public name: string, public text: string, public defaultText: string,
            public complexType: boolean, public type: string, public children: CustomInput[] = [],
            public isMultiValued: boolean,
            public values: string[] = [], public indicator: string, public required: boolean,
            public isSelected: boolean, public simpleTypeVarietyOrComplexTypeContent: number,
            public choiceContent: boolean, public inputQname: string,
            public attributes: Map&lt;string, string&gt; = new Map&lt;string, string&gt;() ) {}
  </code></pre>
  
  <p>}</p>
  
  <p>I want to build a data driven form for the operation but the problem that i couldn't create the array of the children attribute. </p>
  
  <pre><code>export class OperationInputLoadComponent implements OnInit, OnDestroy {
          constructor(  public formBuilder: FormBuilder) {}
          public selectedOperation: Operation; private operationIndex: number;
          operationRequestForm: FormGroup;
        ngOnInit() {this.initForm(); }
         private initForm() {
         let operationName: any;
          let operationInputs: FormArray = new FormArray([]);
         let operationInputsChildren: FormArray = new FormArray([]);
        if (this.selectedOperation.hasOwnProperty('inputs')) {
          for (let i = 0; i &lt; this.selectedOperation.inputs.length; i++ ) {
            operationInputs.push(
              new FormGroup({
          name: new FormControl(this.selectedOperation.inputs[i].name),
          text: new FormControl(this.selectedOperation.inputs[i].text),
          defaultText: new FormControl(this.selectedOperation.inputs[i].defaultText),
        complexType: new FormControl(this.selectedOperation.inputs[i].complexType),
        type: new FormControl(this.selectedOperation.inputs[i].type),
        isMultivalued: new 
        FormControl(this.selectedOperation.inputs[i].isMultiValued),
        values: new FormControl(this.selectedOperation.inputs[i].values),
        indicator: new 
       FormControl(this.selectedOperation.inputs[i].indicator),
        required: new FormControl(this.selectedOperation.inputs[i].required),
        isSelected: new FormControl(this.selectedOperation.inputs[i].
         isSelected),
        simpleTypeVarietyOrComplexTypeContent: new 
  
    FormControl(this.selectedOperation.inputs[i].
    simpleTypeVarietyOrComplexTypeContent),
        choiceContent: new 
          FormControl(this.selectedOperation.inputs[i].choiceContent),
        inputQname: new 
         FormControl(this.selectedOperation.inputs[i].inputQname),
          attributes: new 
          FormControl(this.selectedOperation.inputs[i].attributes),
        children: new FormArray( [] );
        // here I want to loop over all its element because children has type 
           CustomInput[]
        // I have done this but seems don't work 
  
         /* if(this.selectedOperation.inputs[i].hasOwnProperty('children')) {
            for(let j = 0; j &lt; this.selectedOperation.inputs[i].children.length; j ++ ) {
              operationInputsChildren.push(
                new FormGroup({
                  name: new FormControl(this.selectedOperation.inputs[i].children[j].name),
                  text: new FormControl(this.selectedOperation.inputs[i].children[j].text),
                  defaultText: new FormControl(this.selectedOperation.inputs[i].children[j].defaultText),
                  complexType: new FormControl(this.selectedOperation.inputs[i].children[j].complexType),
                  type: new FormControl(this.selectedOperation.inputs[i].children[j].type),
                  isMultivalued: new FormControl(this.selectedOperation.inputs[i].children[j].isMultiValued),
                  values: new FormControl(this.selectedOperation.inputs[i].children[j].values),
                  indicator: new FormControl(this.selectedOperation.inputs[i].children[j].indicator),
                  required: new FormControl(this.selectedOperation.inputs[i].children[j].required),
                  isSelected: new FormControl(this.selectedOperation.inputs[i].children[j].isSelected),
                  simpleTypeVarietyOrComplexTypeContent: new FormControl(this.selectedOperation.inputs[i]
                    .children[j].simpleTypeVarietyOrComplexTypeContent),
                  choiceContent: new FormControl(this.selectedOperation.inputs[i].children[j].choiceContent),
                  inputQname: new FormControl(this.selectedOperation.inputs[i].children[j].inputQname),
                  children: new FormControl(this.selectedOperation.inputs[i].children[j].children),
                })
              );
            }
      } */
        })); }}
    operationName = this.selectedOperation.name;
    this.operationRequestForm = this.formBuilder.group({
    wsdlPath: [this.wsdlPath],
    name: [operationName],
    inputs: operationInputs,
    operationDateInvoke: [],
    operationTimeInvoke: []
    });}
   onSubmit() {console.log(this.operationRequestForm.value);  
   this.wsdlOpService.planifyOperationInvokeByDate
   (this.operationRequestForm.value);}
   ngOnDestroy() {this.subscription.unsubscribe();}
   private navigateBack() {
   this.router.navigate(['../']);}
   onCancel() {this.navigateBack();}}
  </code></pre>
  
  <p>Thanks</p>