从 angular2 食谱中扩展 Dynamic-forms 以便能够拥有数组

Question

我试图从 angular 2 食谱扩展 Dynamic-Forms 应用程序，以便我可以拥有多个字段的数组。 我已经能够显示字段，但是当我填写表单时，我只填写了数组的最后一个元素。

Hier 是我的应用程序状态的plunker：

//question-array.ts
import { QuestionBase } from './question-base';
export class ArrayQuestion extends QuestionBase<string> {
   controlType = 'array';
   options:{childe:FormElement<string>}[] = [];

   constructor(options:{} = {}){
       super(options);
       this.options = options['options'] || [];
   }

}

//问题控制.service.ts

...

toFormGroup(formelements: QuestionBase<any>[] ) {
let group:any = {};

formelements.forEach(element => {
    console.log("+element",element);
    if(element.controlType === "array"){
        let arr:any[] = [];
        let locobj = {};
        element["options"].forEach((option:any) => {
            option["element"].forEach((e:any) =>{
                locobj[e.key] = new FormControl(e.value || '');
            });
            arr.push(new FormGroup(locobj))
        });
        group[element.key] = new FormArray(arr);
    }else{
        group[element.key] = element.required ? new   FormControl(element.value || '', Validators.required)
                                            : new FormControl(element.value || '');
    }

});
return new FormGroup(group);

}

//dynamic-form-question.component.html
...
    <div *ngSwitchCase="'array'"  [formArrayName]="question.key">
    <div *ngFor="let item of question.options; let i=index"  [formGroupName]="i" >
        <div *ngFor="let element of item.element">
            <div *ngIf="element.controlType === 'textbox'" >
                <label>{{element.label}}</label>
                <input [formControlName]="element.key" [id]="element.key" [type]="element.type" />
            </div>
            <div  *ngIf="element.controlType === 'dropdown'" >
                <label>{{item.label}}</label>
                <select [id]="element.key" [formControlName]="element.key">
                    <option *ngFor="let opt of element.options" [value]="opt.key">{{opt.value}}</option>
                </select>
            </div>
        </div>
    </div>
</div>
...

http://plnkr.co/edit/DZ05fO

最好的问候，谢夫基

Answer 1

我发现了这个错误，问题是我在表单组中传递了相同的引用，她是我改变的： //question-control.service.ts toFormGroup(formelements: QuestionBase[] ) { let group:any = {} ;

   formelements.forEach(element => {
      if(element.controlType === "array"){
          let arr:any[] = [];
          let locobj = {};
          element["options"].forEach((option:any) => {
              option["element"].forEach((e:any) =>{
                 locobj[e.key] = e.value || '';
              });
                   arr.push(new FormGroup(this.getFormControlObject(locobj)));

          });
          group[element.key] = new FormArray(arr);
      }else{
          group[element.key] = element.required ? new   FormControl(element.value || '', Validators.required)
                                        : new    FormControl(element.value || '');
      }

   });
return new FormGroup(group);
}
private getFormControlObject(keys){
    let retobj = {};
    Object.keys(keys).forEach(function(key) {
        retobj[key] = new FormControl(keys[key]);
    });
    return retobj;
}

Hier 是一个工作 plunker http://plnkr.co/edit/4IMKdLKE51n41jzYY8sU