遇到错误：formGroup需要一个FormGroup实例。请传递一个

Question

我正在尝试将reactive forms用于在单击按钮时添加的动态值。我遇到以下错误：

  

formGroup需要一个FormGroup实例。请通过

这是我的示例：dynamic-reactive-forms

我是reactive forms的新手。 ts文件中的一些代码：

let numberOfTiles = document.getElementsByClassName("tiledata").length;
    if (this.t.length < numberOfTiles) {
      for (let i = this.t.length; i < numberOfTiles; i++) {
        this.t.push(this.formBuilder.group({
          tabName: ['', Validators.required],
          dashboardName: ['', Validators.required],
          linkTo: ['', Validators.required],
          linkSelected: ['', Validators.required]
        }));
      }
}

get f() { return this.dynamicForm.controls }
  get t() { return this.f.alltabs as FormArray; }

  onSubmit() {
    this.submitted = true;
    if (this.dynamicForm.invalid) {
      return;
    }
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.dynamicForm.value, null, 4));
  }

Answer 1

<div [formGroup]="alltabs">

也许您忘记了alltabs。

Answer 2

尝试此方法 StackBlitz

您的代码中缺少一些内容。我对您的代码做了一些更改。看看下面的代码。

    <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
            <div formArrayName="alltabs">
        <div *ngFor="let item of t.controls; index as i" [formGroupName]="i">

您的allTabs是一个FormArray，因此在HTML中，您必须像formArray一样对其进行定义。 显然，数组具有迭代，因此您必须遍历它们，并找到始终为索引的formGroupName，因为每个表单组都位于formArray的每个索引上。