Question

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

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

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

我想将EmployeeDetailsComponent与formGroupName的 employee1 和 employee2

重用

这是代码stackblitz

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

因此，为了实现这种扁平的层次结构，我试图首先为2名员工做到这一点。

任何帮助将不胜感激

提前谢谢！

Answer 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

Answer 2

我认为您之后已经按照yurzui的建议进行了编辑，但是我看了一下，并修复了一个小bug，它阻止了它的正常工作，这是链接：

Stackblitz

您在没有从组件中提取其值的属性周围有方括号。例如，我将[jsonname]="employee2"更改为jsonname="employee2"。

希望它现在能按预期运行。

动态创建formGroupName无效-Angular反应形式

2 个答案: