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 ...
        ]

对于这种嵌套形式，我必须使用this video中给出的ViewProviders和FormGroupDirective：

第一个嵌套表单（ company-details.component.ts ）可以正常工作

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

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

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

任何帮助将不胜感激！

预先感谢

Answer 1

您需要对代码进行一些更改

1.-employee.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.-被雇用的.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)
  }

最后，在删除员工时，必须删除数组中的元素

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

请参见stackblitz

角反应形式绑定不起作用

1 个答案: