动态创建 formGroupName 不起作用 - Angular 反应式表单答案

【问题标题】：Creating formGroupName dynamically not working - Angular reactive forms动态创建 formGroupName 不起作用 - Angular 反应式表单
【发布时间】：2019-05-31 23:45:10
【问题描述】：

我正在尝试使用此数据层次结构在Angular 中创建ReactiveForm：

-company
  -name
  -city
-employee1
  -name
  -planet
-employee2
  -name
  -planet

我创建了一个组件CompanyDetailsComponent 和另一个EmployeeDetailsComponent

我想重用EmployeeDetailsComponent 和formGroupNames employee1 & employee2

这是代码stackblitz

实际上我想让它适用于可变数量的员工我必须保持结构平坦（我不能使用员工数组，在这种情况下我会使用 FormArray 像 this）

因此，为了实现这种扁平的层级结构，我首先尝试为 2 名员工实现。

任何帮助将不胜感激

提前谢谢你！

【问题讨论】：

标签： angular angular2-forms angular-reactive-forms formgroups

【解决方案1】：

有几个步骤可以让它工作：

如下更改表单模板：

<form [formGroup]="form">
  <app-company-details></app-company-details>
  <app-employee-details jsonname="employee1"></app-employee-details>
  <app-employee-details jsonname="employee2"></app-employee-details>
</form>

根据提供的jsonname 字符串创建嵌套表单组：

employee-details.component.ts

@Component({
  selector: 'app-employee-details',
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ],
  ...
})
export class EmployeeDetailsComponent implements OnInit {
  @Input() jsonname;

  constructor(private fb: FormBuilder, private fgd: FormGroupDirective) { }

  ngOnInit() {
    const group = this.fb.group({
      name: new FormControl(),
      planet: new FormControl()
    });

    this.fgd.form.addControl(this.jsonname, group);
  }
}

employee-details.component.html

<div [formGroupName]="jsonname">
  ...
</div>

Stackblitz Example

【讨论】：

【解决方案2】：

我想你已经按照 yurzui 的建议对其进行了编辑，但我看了看并修复了一个阻止它工作的小错误，这是链接：

Stackblitz

您在属性周围有方括号，这些属性没有从组件中提取它们的值。比如我把[jsonname]="employee2"改成了jsonname="employee2"。

希望它现在按预期工作。

【讨论】：

【解决方案3】：

问题因为 Angular 9 不允许数字作为 formGroupName。这是由于严格的角度类型检查。下面的解决方案对我有用。

非工作代码：

<ng-container *ngFor="let configurationCtrl of configurationForm.get('configurations').value;
let i = index" [formGroupName]="i">

工作代码：

<ng-container *ngFor="let configurationCtrl of configurationForm.get('configurations')['controls'];
let i = index" [formGroupName]="i">

注意：我用控件替换了值。

【讨论】：