Angular无表单输入字段时FormArray赋值localStorage提交为空如何解决

问题根因 #

问题出在两点：

• 执行顺序错误：你先调用formInit()初始化表单，之后才从localStorage读取店铺数据赋值给this.shop，表单初始化阶段this.shop还没有值，所以FormArray初始为空
• FormArray构造错误：formBuilder.array()接收的是FormControl实例组成的数组，你直接把this.shop整个数组作为第一个元素传入，相当于把整个数组套了一层，不符合取值逻辑

修正实现 #

调整执行顺序，先读取本地存储数据，再初始化表单，同时构造FormArray时遍历店铺数组生成对应的FormControl：

ngOnInit(): void {
  // 优先读取本地存储数据
  const shopIdsStr = localStorage.getItem('cdk-shop-list');
  if (shopIdsStr) {
    this.shop = JSON.parse(shopIdsStr);
    console.log(this.shop);
  }
  // 数据读取完成后再初始化表单
  this.formInit();
}

formInit = () => {
  // 构造FormControl数组：如果shop有值就遍历生成对应控件，否则返回空数组
  const shopIdControls = this.shop?.map(id => this.formBuilder.control(id)) || [];
  this.couponForm = new FormGroup({
    shopIDs: this.formBuilder.array(shopIdControls),
  });
};

如果后续需要动态修改shopIds的值，可以调用FormArray自带方法更新：

// 动态更新shopIds示例
updateShopIds(newShopIds: string[]) {
  const shopIdArray = this.couponForm.get('shopIDs') as FormArray;
  // 清空原有值
  shopIdArray.clear();
  // 插入新值
  newShopIds.forEach(id => shopIdArray.push(this.formBuilder.control(id)));
}

注意：表单字段名是shopIDs，取值时要保证大小写完全一致，避免因为字段名不匹配拿不到值。

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