角度反应形式绑定不起作用 [英] Angular reactive form binding not working

问题描述

我正在尝试在这里创建嵌套的反应式表单:https://stackblitz.com/edit/角度-mgrfbj

这是项目层次结构:

---创建公司表单(hello.component.ts)--- 公司详细信息表(company-details.component.ts)--- [员工详细信息表(employee-details.component.ts)员工详细信息表员工详细信息表...]

对于这样的嵌套表单，我必须使用 ViewProviders 和 FormGroupDirective，如 此视频:

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

但是在 FormArray 中添加了 *ngFor 的第二个表单没有正确绑定到 FormGroupDirective.

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

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

任何帮助将不胜感激！

提前致谢

解决方案

需要对你的代码进行一些更改

1.-已使用的.details.component.html

<!---看到是[formGroup]，而不是formGroupName--><div [formGroup]="员工"><h4 class="row">员工编号.{{index+1}}<div class='col-md-8'><input formControlName="name" placeholder="Name">

<div class='col-md-8'><input formControlName="planet" placeholder="Planet">

2.- used.details.component.ts，变成了

 员工:任何；@Input() 索引；//在变量fgd中注入ForumGroupDirective构造函数(私人FB:FormBuilder，私有 fgd:FormGroupDirective) {}ngOnInit() {//获取员工"的FormArrayconst array=(this.fgd.form.get('employees') as FormArray);//简单的推送到数组array.push(this.fb.group({姓名: ''，行星: ''}));//formGroup 必须是 array.at(index)this.employee = array.at(this.index)}

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

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

请参阅 stackblitz

I'm trying to create nested reactive forms here : https://stackblitz.com/edit/angular-mgrfbj

This is the project heirarchy:

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

For such nested forms, I have to use ViewProviders and FormGroupDirective as given in this video:

The first nested form (company-details.component.ts) is working as expected

But the second form which is added with *ngFor inside a FormArray is not binding to the FormGroupDirective correctly.

When you type the company details and press Print Json, then the printed json will be correct. But when you add an employee or two, then the employee details are not printed in the json.

I know there are other manual ways to accomplish the same thing, but I'm looking for a clean solution that just works without any extra functions.

Any help will be really appreciated!

Thanks in advance

解决方案

there are to make several changes in your code

1.-The 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.- the employed.details.component.ts, becomes as

  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)
  }

Finally, when remove the employe you must remove the element in the array

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

see the stackblitz

这篇关于角度反应形式绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！