Angular 2 - 动态组件模板 - 如何按需克隆 FormControl

Question

我实现了一个动态数据表，到目前为止还不错，

在表格的底部，有一行包含允许用户添加新记录的某些列的输入，并且每个添加的行都是可编辑的

我的问题是当我内联编辑一行时，我需要相同的验证，所以我需要克隆我为底行定义的 FormControl

这是我在代码中使用的定义示例，当我实例化我的数据表组件（对于一列）时

...,
{
  name: this.getTrad('Points'),
  value: 'points',
  width: 100,
  type: DataTableComponent.INPUT,
  editable:true,
  numeric:true,
  validationControl:
    new FormControl({ value: '', disabled: false },
      [Validators.required,
      Validators.minLength(1), 
      Validators.maxLength(100)
    ])
},

那么，我如何克隆 FormControl 以将其分配给动态创建的输入？ 我检查了一个 FormControl 实例，验证器没有访问器？

到目前为止，我唯一的想法是为我的组件提供每个列的验证器数组，而不是 FormControl 的整个实例

如果有人有更好的主意......

谢谢

Answer 1

我刚刚遇到了这个问题。我用一个普通的新实例解决了以下用例：

@Component({...})
export class FooDialogComponent {
  formControl: FormControl;

  constructor(@Inject(MAT_DIALOG_DATA) public data: { system: number, control: AbstractControl }, // TODO define interface
             public dialogRef: MatDialogRef<UpdateQuantityDialogComponent>) 
  {
    this.formControl = new FormControl(this.data.control.value, this.data.control.validator);
  }
}

通过这种方法，formControl 与注入的AbstractControl 具有相同的state 和validators。

Ofc，如果控件的value 不是原始类型，则需要执行（深度）复制。

希望对你有帮助