虽菜但瘾 2020-09-17 17:38 采纳率: 0%
浏览 151

(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来直接控制一条数据?

  • 写回答

1条回答 默认 最新

  • dabocaiqq 2020-09-18 09:07
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
  • ¥15 安装svn网络有问题怎么办