用通用函数替换2个特定函数

Question

用动态添加输入字段创建表单。

1. 我宣布我formsGroup
2. 构建控制
3. addPers()和addBacklogs()创造新的领域。

我会通过一个功能和参数替换这些2个funtions我选择我要在这里建立一个原型的我所想象的字段：

addField(groupparam: FormGroup, fieldparam : FormArray, functionAdd: FormGroup): void { 
    const control = <FormArray> this.<groupparam>.controls[fieldparam]; 
    control.push(this.<functionAdd()>); 
} 

这里是我的TS文件

export class AjoutProjetComponent implements OnInit { 
    isLinear = false; 
    firstFormGroup: FormGroup; 
    secondFormGroup: FormGroup; 
    thirdFormGroup: FormGroup; 

    constructor(private _formBuilder: FormBuilder) {} 

    ngOnInit() { 
     this.firstFormGroup = this._formBuilder.group({ 
      leadProj: ['', Validators.required], 
      nomProj: ['', Validators.required], 
      descProj: ['', Validators.required], 
      besProj: ['', Validators.required], 

     }); 
     this.secondFormGroup = this._formBuilder.group({ 
      pers: this._formBuilder.array([this.createItem()]) 
     }); 

     this.thirdFormGroup = this._formBuilder.group({ 
      backlog: this._formBuilder.array([this.createFonct()]) 
     }); 
     console.log(this.secondFormGroup); 

    } 
    createItem(): FormGroup { 
     return this._formBuilder.group({ 
      name: ['', Validators.required], 
      poste: ['', Validators.required], 
     }); 
    } 

    createFonct(): FormGroup { 
     return this._formBuilder.group({ 
      fonctionnalite: ['', Validators.required], 
      userStory: ['', Validators.required], 
     }); 


    } 
    deleteItem(index: number) { 
     const control = <FormArray> this.secondFormGroup.controls['pers']; 
     control.removeAt(index); 
    } 

    addPers(): void { 


     const control = <FormArray> this.secondFormGroup.controls['pers']; 
     control.push(this.createItem()); 
    } 
    addBacklog(): void { 


     const control = <FormArray> this.thirdFormGroup.controls['backlog']; 
     control.push(this.createFonct()); 
    } 

然后在HTML而不是通过AddBacklog()或AddItem()我会通过一个相同的函数与足够的参数addField(groupparam, fieldparam, functionAdd)

Answer 1

我不确定我是否理解你的权利，但我认为你的解决方案将工作得很好。例如，你可以使用字符串：

addField(groupparam: string, fieldparam: string, functionAdd: string): void { 

    const control = <FormArray> this[groupparam]controls[fieldparam]; 
    control.push(this[functionAdd]()>); 
} 

然后像做

this.addField('secondFormGroup', 'pers', 'createItem') 

在你的代码。

无论这是整个用例的最佳解决方案，您必须知道。