Angular 角度2形式“；找不到路径为“”的控件；

我尝试创建一个动态表单（这样您就可以无限地将项目添加到列表中），但不知何故，我的列表的内容没有被发送，因为它找不到具有路径的控件：

找不到路径为“列表项->列表项”的控件

我的组成部分：

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  listForm: FormGroup;

  constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,
                private listService: ListService) { 
    this.listForm = this.fb.group({
      title: ['', [Validators.required, Validators.minLength(5)]],
      list_items: this.fb.array([
        this.initListItem(),
        ])
    });
  }


  initListItem() {
    return this.fb.group({
      list_item: ['']
    });
  }
  initListItemType() {
    return this.fb.group({
      list_item_type: ['']
    });
  }

  addListItem() {
    const control = <FormArray>this.listForm.controls['list_items'];
    control.push(this.initListItem());
  }

@组件({
选择器：“应用程序列表”，
templateUrl:'./list.component.html'，
样式URL:['./list.component.css']
})
导出类ListComponent实现OnInit{
列表形式：FormGroup；
构造函数（私有nodeService:nodeService、私有messageService:messageService、私有fb:FormBuilder、，
专用listService:listService）{
this.listForm=this.fb.group({
标题：[''[Validators.required，Validators.minLength（5）]，
列表项：this.fb.array([
this.initListItem（），
])
});
}
initListItem（）{
返回此.fb.group({
列表项：['']
});
}
initListItemType（）{
返回此.fb.group({
列表项目类型：['']
});
}
addListItem（）{
const control=this.listForm.controls['list_items']；
control.push（this.initListItem（））；
}

模板（list.component.html）：

添加列表
{{i+1}}。）
添加列表项+
提交

标题工作正常，但我找不到“formControlName”的错误，这是导致错误的原因

在此问题上提前感谢您的帮助

更新我所更改的内容 list.component.html

<h2>Add List </h2>

<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
  <div class="form-group">
    <input type="text" class="form-control" formControlName="title" placeholder="Title">
  </div>

  <div formArrayName="list_items">
    <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
      {{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control">
    </div>
    <a (click)="addListItem()">Add List Item +</a>

  </div>

  <button type="submit">Submit</button>
</form>

添加列表
{{i+1}}。）
添加列表项+
提交

在我的组件中，我更改了构造函数和addListItem方法：

listForm: FormGroup;

  constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,
                private listService: ListService) { 
    this.listForm = this.fb.group({
      title: ['', [Validators.required, Validators.minLength(5)]],
      list_items: this.fb.array([
          [''],
        ])
    });
  }

  addListItem() {
    const control = <FormArray>this.listForm.controls['list_items'];
    control.push(this.fb.control(['']));
    console.log(control)
  }

listForm:FormGroup；
构造函数（私有nodeService:nodeService、私有messageService:messageService、私有fb:FormBuilder、，
专用listService:listService）{
this.listForm=this.fb.group({
标题：[''[Validators.required，Validators.minLength（5）]，
列表项：this.fb.array([
[''],
])
});
}
addListItem（）{
const control=this.listForm.controls['list_items']；
control.push（这个.fb.control（['']）；
控制台日志（控制）
}

在映射到组件文件的HTML表单中应该有一个

formControlName

{{i+1}}。）

列出项目：this.fb.array([
['']，//0点指向此
[“”]，//1指向此
['']//2点指向此
])

我也遇到了这个错误，我通过启动类的变量（this.fb.array（[]）中的元素）解决了这个问题

代码片段

    mobileNumbers: this.fb.array([this.fb.group(new MobileNumber('IN'))]),

其中使用classMobileNumber

export class MobileNumber{
    public country_code: string;
    public mobile_number: string;
    constructor($cc){
        this.country_code = COUNTRY_CODES[$cc];
    }
}

到

---

请注意，如果

FormArray

包含其他

FormGroup

控件（其中包含

FormControl

的其他实例），则需要执行此操作才能访问每个

FormGroup

中的控件：

        <div *ngFor="let item of myFormArray.controls; let i=index">
            <div formGroupName="{{i}}">
                <input formControlName="myFormGroupSubControl1" />
                <input formControlName="myFormGroupSubControl2" />

---

一个带有FormArray@的简单示例（要点如下）

应用程序组件.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  fg: FormGroup;
  constructor(private fb: FormBuilder){}
  ngOnInit() {
  this.fg = this.fb.group({
    address: this.fb.group({
      street: ['', Validators.required],
    }),
    aliases: this.fb.array([])
  });
  const fa = (this.fg.get('aliases')as FormArray);
  this.addNewAlias();
  }
  addNewAlias(){
    const fa = (this.fg.get('aliases')as FormArray);
    fa.push(this.fb.group({
      name: ['', Validators.required]
    }));
  }
  deleteAlias(i:number){
    const fa = (this.fg.get('aliases')as FormArray);
    fa.removeAt(i);
    if(fa.length===0) this.addNewAlias();
  }
}

app.component.html

<form [formGroup]="fg" class="spaced">
  <h3>Nested in Group:</h3>
  <div formGroupName="address" class="spaced">
    <label>
      <input type="text" formControlName="street">
      valid: {{fg.get('address').get('street')?.valid}}
    </label>
  </div>
  <h3>Nested in Array:</h3>
  <div formArrayName="aliases" *ngFor="let alias of fg.get('aliases').controls; let i = index;" class="border">
    <div [formGroupName]="i">
      <label>
        Alias {{i+1}}:
        <input formControlName="name" placeholder="Item name">valid: {{alias.get('name')?.valid}}
      </label>
      <button type="button" (click)="deleteAlias(i)">X</button>
    </div>
  </div>
  <button type="button" (click)="addNewAlias()">add</button>
</form>
<div>form valid: {{fg?.valid}}</div>

嵌套在组中：
有效：{{fg.get（'address'）.get（'street'）？.valid}
嵌套在数组中：
别名{{i+1}}：
有效：{{alias.get（'name'）？.valid}
X
添加
格式有效：{{fg？.valid}

必须使用插值

而不是：

    <div
      class="form-group"
      *ngFor="let hobbyControl of getControls(); let i = index">
      <input type="text" class="form-control" formControlName="i">
    </div>

---

必须将插值与“formControlName”一起使用：

如果您使用的是Angular的最新版本，请确保在TypeScript文件中执行操作，而不是在网页中，如文件“app.component.ts”中所示：

getControls（）{
return（this.signupForm.get（'cabiods'））.controls；
}

->在组件文件中添加FormArray

 //TO USE FormArray (set form1:any;)
 form1:any;

  hobbies: new FormArray([
     new FormControl()
  ])

->向爱好添加/删除控件的步骤

 addHobbies(){
   this.form1.get('hobbies').push(new FormControl());
 }

removeHobbies(index:number){
   this.form1.get('hobbies').removeAt(index);
}

->模板文件

业余爱好
去除
这不会影响我努力实现的目标吗？我有我的` initListItem（）它返回“列表项目”，因此可以动态添加新表单。您对如何实现这一点有其他建议吗？非常感谢您引导我朝着正确的方向前进。我将在主帖子中发布我所更改的内容：）！@dowu这真是太棒了：）我的帖子中有一个更新；）！@Manish如果我nt my
formControlName
更具描述性（如
item-{i}
）我如何在formbuilder数组中匹配它？可能吗？我尝试用
{item-0'：'}
替换
['']
，以及其他一些东西，但它不起作用，我找不到这样的示例。我花了一个下午才知道这一点[formGroupName]=“i”`是使用嵌套数组时必须使用的。
formArrayName
这正是我想要的，谢谢
    <div
      class="form-group"
      *ngFor="let hobbyControl of getControls(); let i = index">
      <input type="text" class="form-control" [formControlName]="i">
    </div>

  getControls() {
    return (<FormArray>this.signupForm.get('hobbies')).controls;
  }

 //TO USE FormArray (set form1:any;)
 form1:any;

  hobbies: new FormArray([
     new FormControl()
  ])

 addHobbies(){
   this.form1.get('hobbies').push(new FormControl());
 }

removeHobbies(index:number){
   this.form1.get('hobbies').removeAt(index);
}

<div formArrayName="hobbies">
   <label for="hobbies">Hobbies</label>
   <div *ngFor="let hobby of form1.get('hobbies').controls;index as i">
    <input type='text' id="hobbies" class="form-control" placeholder="hobbies" [formControlName]="i">
    <button type="button" (click)="removeHobbies(i)">remove</button>
  </div>
  <button type="button (click)="addHobbies()">Add</button> 
 </div>