Question

我有一个很大的组件，可以使用FormBuilder将选定记录中的数据加载到FormGroup中。

我正在将这个组件分为可重用服务和子组件。

我有一个从视图调用的函数，用于向FormArray添加新行。此函数采用数组名称和要添加的值。

这在组件中正常工作。

问题：如何将此功能移至服务（或其他解决方案）以使其可在许多不同组件之间重用？换句话说，我希望能够在许多组件之间使用onAddRow函数，而不必重复重写逻辑。由于此函数利用this关键字访问当前上下文，因此我不确定如何将其移至可重用服务。

这是我试图能够转移到服务中的组件代码。请注意，我还有许多其他类似于onAddRow的函数，它们使用了this关键字，并且我希望能够将所有内容移到可重用的服务中。

TS组件

  constructor(
    private fb: FormBuilder
  ) { }

  /**
   * Add a new element to a form control array
   * @param {string} formCtrlArrayName name of the form control array
   * @param {string} valueToAdd element to add to the form control array
   */
  public onAddRow(formCtrlArrayName: string, valueToAdd: any) {
    this[formCtrlArrayName].push(this.fb.control(valueToAdd));
  }

HTML组件

  <button mat-button attr.aria-label="Add Assigned To" matTooltip="Add Assigned To"
    (click)="onAddRow('AssignedTo', '', '')">
    <mat-icon>add_circle</mat-icon>
  </button>

Answer 1

未测试-在此处注销袖口，但类似的方法应该起作用：

// this is some reusable code in a service etc
public addRow(formCtrlArray: any, valueToAdd: any): any { // accept any, return any
  let myArray = <Array<any>>formCtrlArray;
  myArray.push(valueToAdd);
  return myArray;
}

然后只需从您的组件中调用它，并传递正确的参数即可...

Answer 2

BlairHolmes提供的建议为我指明了正确的方向。另外，这里是相关文章。 https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

这是我的解决方法：

服务

  constructor(
    private fb: FormBuilder
  ) { }

  /**
   * Add a new element to a form control array
   * @param {string} formGroup form group of the form control array
   * @param {string} formCtrlArrayName name of the form control array
   * @param {string} valueToAdd element to add to the form control array
   */
  public addRow(formGroup: any, formCtrlArrayName: string, valueToAdd: any) {
    let control = formGroup.controls[formCtrlArrayName];
    control.push(this.fb.control(valueToAdd));
  }

TS组件（要从HTML组件调用的包装器）

  constructor(
    private fb: FormBuilder
  ) { }

  /**
   * Add a new element to a form control array
   * @param {string} formCtrlArrayName name of the form control array
   * @param {string} valueToAdd element to add to the form control array
   */
  public onAddRow(formCtrlArrayName: string, valueToAdd: any) {
    this.uiService.addRow(this.itemForm, formCtrlArrayName, valueToAdd);
  }

HTML组件（不变）

<button mat-button attr.aria-label="Add Assigned To" matTooltip="Add Assigned To"
  (click)="onAddRow('AssignedTo', '')">
  <mat-icon>add_circle</mat-icon>
</button>

将使用`this`关键字的函数从组件移至共享服务

2 个答案: