Angular表单报错：无法找到路径'users -> 0 -> data -> cat_name'的控件

嘿，我一眼就get到你卡壳的点了——报错Cannot find control with path: 'users -> 0 -> data -> cat_name'的根源特别明确：你在组件里把data定义成了FormArray，但模板里却错误地用formGroupName="data"来绑定它，这完全不符合FormArray的使用规则！

问题核心 #

FormArray必须用formArrayName指令来声明，然后得通过*ngFor遍历它的控件集合，每个子控件再用formGroupName绑定对应的索引。你直接给data套formGroupName，Angular会把它当成FormGroup去查找，自然找不到正确的控件路径。

修正步骤 #

1. 修复模板中的data控件绑定

把原来的错误代码：

<fieldset formGroupName="data">
  cat_name:<input type="text" formControlName="cat_name">
</fieldset>

替换成适配FormArray的写法：

<fieldset formArrayName="data">
  <div *ngFor="let dataItem of user.controls.data.controls; let j=index" [formGroupName]="j">
    cat_name:<input type="text" formControlName="cat_name">
    <br>
    category:<input type="text" formControlName="category">
  </div>
</fieldset>

这里的关键细节：

• 用formArrayName="data"明确告诉Angular这是一个FormArray
• 通过user.controls.data.controls获取该FormArray下的所有子控件
• 用*ngFor循环每个子FormGroup，并用[formGroupName]="j"绑定索引

2. 完整修正后的HTML代码

<form [formGroup]="myForm" (ngSubmit)="onMy(myForm.value)"> 
  <ng-container formArrayName="users"> 
    <div *ngFor="let user of myForm.controls.users.controls; let i=index" [formGroupName]="i"> 
      <select (change)="selectarch($event)"> 
        <option>Select</option> 
        <option [value]="res.firstname" *ngFor="let res of users">{{res.firstname}}</option> 
      </select> 
      <br><br> 
      First name:<input type="text" formControlName="firstname"> 
      <br> 
      Last name:<input type="text" formControlName="lastname"> 
      <br> 
      Street:<input type="text" formControlName="street"> 
      <br><br> 
      <select (change)="selectcolumn($event)"> 
        <option>Select</option> 
        <option [value]="col.cat_name" *ngFor="let col of test[0].data">{{col.cat_name}}</option> 
      </select> 
      <br><br> 
      <!-- 修正后的data FormArray绑定区域 -->
      <fieldset formArrayName="data">
        <div *ngFor="let dataItem of user.controls.data.controls; let j=index" [formGroupName]="j">
          cat_name:<input type="text" formControlName="cat_name">
          <br>
          category:<input type="text" formControlName="category">
        </div>
      </fieldset> 
    </div> 
  </ng-container> 
  <button type="submit">Add</button> 
</form>

额外确认 #

你的组件代码里创建FormArray的逻辑是没问题的：

let dataArr = new FormArray([]); 
dataArr.push(new FormGroup({ 
  'cat_name': new FormControl(this.users[0].data[0].cat_name), 
  'category': new FormControl(this.users[0].data[0].category) 
})); 

只要模板按上面的方式绑定，cat_name和category就能正常渲染啦。

内容的提问来源于stack exchange，提问作者Ramu