Angular 表单数组：找不到路径为&x27；列表->；说明'；

问题:

当我加载网站时，我的控制台显示错误：找不到路径为“list->description”的控件

单击“添加”按钮将显示添加到数组中的数据在描述和状态方面都是“未定义”的

如何解决上述两个问题

代码如下：

组件。ts

tableData: TableData[] = [
    { id: 'aaaaa', description: 'Go to market', status: true },
    { id: 'bbbbb', description: 'Buy groceries', status: true },
    { id: 'ccccc', description: 'Order pizza delivery', status: false },
  ];

  todoListForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.createForm()
  }

  ngOnInit(): void {
  }

  getRandomID() {
    var text = "";
    var alphanumeric = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 5; i++) {
      text += alphanumeric.charAt(Math.random() * alphanumeric.length) +
        alphanumeric.charAt(Math.random() * alphanumeric.length) +
        alphanumeric.charAt(Math.random() * alphanumeric.length) +
        alphanumeric.charAt(Math.random() * alphanumeric.length) +
        alphanumeric.charAt(Math.random() * alphanumeric.length);

      console.log(text);

      return text;
    }
  }

  createForm(): void {
    this.todoListForm = this.formBuilder.group({
      list: this.formBuilder.array([])
    });

    this.addList();
  }

  get list(): FormArray {
    return this.todoListForm.get('list') as FormArray;
  }

  addList() {
    const tdLForm = this.formBuilder.group({
      id: new FormControl(null),
      description: new FormControl (null, Validators.required),
      status: new FormControl (false),
    });

    this.list.push(tdLForm);
  }

  addRow(description: string, status: boolean) {
    const id = this.getRandomID();
    const newData: TableData = { id, description, status }

    this.tableData.push(newData);

    console.log('tableData', this.tableData);

    this.createForm(); //reset Form
  }

export interface TableData {
  id: string,
  description: string,
  status: boolean
}

tableData:tableData[]=[
{id:'aaaaa'，描述：'Go to market'，状态：true}，
{id:'bbbbb'，描述：'Buy groceries'，状态：true}，
{id:'ccccc'，描述：'Order pizza delivery'，状态：false}，
];
todoListForm:FormGroup；
构造函数（专用formBuilder:formBuilder）{
这个
}
ngOnInit（）：void{
}
getRandomID（）{
var text=“”；
var alphanumeric=“ABCDEFGHIJKLMNOPQRSTUVXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”；
对于（变量i=0；i<5；i++）{
text+=字母数字.charAt（Math.random（）*字母数字.length）+
字母数字.charAt（Math.random（）*字母数字.length）+
字母数字.charAt（Math.random（）*字母数字.length）+
字母数字.charAt（Math.random（）*字母数字.length）+
字母数字.charAt（Math.random（）*字母数字.length）；
console.log（文本）；
返回文本；
}
}
createForm（）：void{
this.todoListForm=this.formBuilder.group({
列表：this.formBuilder.array（[]）
});
这个.addList（）；
}
获取列表（）：FormArray{
将此.todoListForm.get（'list'）作为FormArray返回；
}
地址列表（）{
const tdLForm=this.formBuilder.group({
id:new FormControl（空），
描述：新FormControl（空，需要验证程序），
状态：新FormControl（错误），
});
this.list.push（tdLForm）；
}
addRow（描述：字符串，状态：布尔值）{
const id=this.getRandomID（）；
const newData:TableData={id，description，status}
this.tableData.push（newData）；
console.log（'tableData'，this.tableData）；
this.createForm（）；//重置表单
}
导出接口表数据{
id:string，
描述：字符串，
状态：布尔值
}

---

component.html

{{ list.value | json}}
<form [formGroup]="todoListForm">
    <label> Description: </label>

    <div formArrayName="list">
        <div class="textbox">
            <input formControlName="description" placeholder="Enter description"
            type="text" maxlength="255" />
        </div>

        <input formControlName="status" type="checkbox" /> Completed

        <div class="button">
            <button class="btn btn-primary" type="submit" (click)="addRow(list.value.description, list.value.status)">
                Add
            </button>
        </div>
    </div>
</form>

{{list.value | json}
说明：
完整的
添加

由于正在进行一次正式排列，因此缺少一个循环。尝试：

<div formArrayName="list">
<div *ngFor="let listItem of todoListForm.controls.list.controls; let c=index" [formGroupName]="c">

带：