(angular2) 如何以数组为数据源来动态增加表单项？

要求：根据在刚进入生命周期时获取到的数组数据，进行页面表单项的新增

// 数组数据：

  tempList: any = [
    { id: 1, name: '张三', age: 20, phoneNumber: 15855855858 },
    { id: 2, name: '李四', age: 21, phoneNumber: 15855855858 },
    { id: 3, name: '王二', age: 22, phoneNumber: 15855855858 },
  ];

// 新增control

 ngOnInit(): void {
    this.validateForm = this.fb.group({});
    this.addField();
  }

  addField(): void {
    this.tempList.forEach((item: any) => {
      this.validateForm.addControl(item.name, new FormControl(item.name, Validators.required));
      this.validateForm.addControl(item.age, new FormControl(item.age, Validators.required));
      this.validateForm.addControl(
        item.phoneNumber,
        new FormControl(item.phoneNumber, [Validators.required, Validators.pattern(/^1(3|4|5|6|7|8|9)\d{9}$/)]),
      );
    });
  }

这样的写法拿到的controlName是很多的，想着数据以什么形式过来的，提交时也应该以什么形式出去，就不知道如何新增一个control来直接控制一条数据？

https://blog.csdn.net/wjyyhhxit/article/details/91973582