Angular

Question

我有以下反应形式。我想做的是复制一份表格的一部分，然后把它变成一个新的。

 this.myForm = this.formBuilder.group({
            group: this.formBuilder.group({
                name: 'Zero',
                lastName: 'Zeroo'
            }),
            name: 'One',
            array: this.formBuilder.array([
                { name: 'two'},
                { name: 'three'}
                ])
        });

使用下面的代码，我尝试做复制。

    let formControlKeys = Object.keys(this.myForm.value);
    this.myCopyForm = this.formBuilder.group({});
    for (let key of formControlKeys){
              console.log(typeof this.myForm.controls[key]);
              // prints object

              // code to create new FormControl / FormGroup / FormArray 
              // inside myCopyForm according to type got above
          }

所需的功能是获取 reactive-form 类型，而不仅仅是 object.

Answer 1

你走在正确的轨道上。这里要注意的是，当您尝试使用 typeof 关键字 console.log 某些东西的类型时，您实际上得到了运行-time Javascript 那个东西的类型，这在这种情况下是 object。 Typescript 是一种 compile-to-JS 语言，这意味着所有那些花哨的类型和接口等仅用于静态类型检查。当您的代码到达浏览器时，所有类型信息都消失了，您正在寻找普通的旧 Javascript.

因此，您在代码中引用它时 this.myForm.controls[key] 的类型实际上就是您想要的 an AbstractControl。您可以使用这些控件来构建表单的副本，如下所示：

this.copyForm = new FormGroup({});
for (let key of Object.keys(this.myForm.value)) {
  const control = this.myForm.controls[key]; // AbstractControl
  this.copyForm.addControl(key, control);
}

有关 FormGroup API 的更多信息可在此处找到：https://angular.io/api/forms/FormGroup。

Angular - 查找表单组控件的类型

Angular - Find type of form groups controls

angular-reactive-forms