angular2 formbuilder 多嵌套formGroupName答案

【问题标题】：angular2 formbuilder multi-nested formGroupNameangular2 formbuilder 多嵌套formGroupName
【发布时间】：2017-05-31 15:18:01
【问题描述】：

我面临以下错误：

EXCEPTION: Uncaught (in promise): Error: Error in ./AccComponent class AccComponent - inline template:106:11 caused by: Cannot find control with name: 'det'

我的表单生成器如下：

this.AccForm = this.fb.group({
      accid: ['', Validators.required],
      accnbr: ['', Validators.required],
      cyc: this.fb.group({
        cycid:['', Validators.required],
        name:['', Validators.required],
        description:['', Validators.required],  
        det: this.fb.group({
          dcycid: ['', Validators.required],
          status: ['', Validators.required],
        })
      })
    });

在我的模板中，当我尝试获取 formgroupname 'det' 时出现错误？

    <div formGroupName="det">
           <div class="row">
             <div class="form-group>
                <span><strong>Id</strong></span>
                <input formControlName="dcycid" id="dcycid" type="number" class="form-control">
              </div>    
             <div class="form-group">
                <span><strong>status</strong></span>
                <input formControlName="status" id="status" type="text" class="form-control">
             </div>
           </div>
    </div>

Remark 'det' 嵌套在第 3 层。

知道有什么问题吗？

谢谢。

/KOul

【问题讨论】：

标签： angular2-template angular2-formbuilder

【解决方案1】：

请找到更正后的 HTML，您需要做的是按照 JSON 嵌套 FormGroupNames

<div [formGroup]="AccForm">
 <div formGroupName="cyc">
  <div formGroupName="det">
  <div class="row">
    <div class="form-group">
      <span><strong>Id</strong></span>
      <input formControlName="dcycid" id="dcycid" type="number" class="form-control">
    </div>
    <div class="form-group">
      <span><strong>status</strong></span>
      <input formControlName="status" id="status" type="text" class="form-control">
    </div>
  </div>
</div>

【讨论】：