Angular 反应式表单绑定不起作用

Question

我正在尝试在此处创建嵌套反应式表单：https://stackblitz.com/edit/angular-mgrfbj

这是项目层次结构：

---create company form (hello.component.ts)
    --- company details form (company-details.component.ts)
    --- [
        employee details form (employee-details.component.ts)
        employee details form
        employee details form ...
        ]

对于这种嵌套形式，我必须使用 ViewProviders 和 FormGroupDirective，如 this video:

第一个嵌套表单 (company-details.component.ts) 按预期工作

但是在 FormArray 中添加 *ngFor 的第二种形式没有正确绑定到 FormGroupDirective。

当您键入公司详细信息并按打印Json时，打印的json将是正确的。但是，当您添加一两个员工时，员工详细信息不会打印在 json.

中

我知道还有其他手动方法可以完成同样的事情，但我正在寻找一种无需任何额外功能即可正常工作的干净解决方案。

任何帮助将不胜感激！

提前致谢

Answer 1

您的代码需要进行几处更改

1.-employed.details.component.html

<!---see that is [formGroup], not formGroupName-->
<div [formGroup]="employee">
  <h4 class="row">Employee no. {{index+1}}</h4>
  <div class='col-md-8'>
    <input formControlName="name" placeholder="Name">
  </div>
  <div class='col-md-8'>
    <input formControlName="planet" placeholder="Planet">
  </div>
</div>

2.- employed.details.component.ts, 变成

  employee: any;
  @Input() index;
  //inject the ForumGroupDirective in the variable fgd    
  constructor(private fb: FormBuilder,
              private fgd: FormGroupDirective) {}

  ngOnInit() {
    //get the FormArray of "employees"
    const array=(this.fgd.form.get('employees') as FormArray);

    //Simple push to the array
    array.push(this.fb.group({
      name: '',
      planet: ''
      }));
    //the formGroup must be array.at(index)
    this.employee = array.at(this.index)
  }

最后，删除employ时必须删除数组中的元素

  removeEmployee() {
    this.employeesCount -= 1;
    (this.form.get('employees') as FormArray).removeAt(this.employeesCount);
  }

查看 stackblitz

Angular 反应式表单绑定不起作用

Angular reactive form binding not working

angular2-forms

angular

angular-reactive-forms