Angular中FormBuilder表单值存入数组后为空字符串问题排查

问题根源 #

你在类层面直接声明array属性并赋值时，Angular组件还未完成初始化、用户也未输入表单内容，此时array存储的是表单字段的初始空值。后续你修改表单字段值后，array不会自动同步更新，所以你打印出来的还是最早的空值。而你单独打印表单字段值时，读取的是字段的实时值，因此可以正常输出。

解决方法 #

• 方法1：在需要用到数组的时机实时生成
  不需要提前声明array类属性，在表单提交、数据导出等需要用到数组的逻辑中，当场读取表单最新值生成数组即可：

// 示例：表单提交方法中调用
onSubmit() {
  const array = [
    this.AddStatusBoxForm.get('cpuTempTopic')?.value,
    this.AddStatusBoxForm.get('uptimeTopic')?.value,
    this.AddStatusBoxForm.get('timeTopic')?.value
  ];
  console.log(array); // 此时为表单最新值
}

如果表单字段顺序和你需要的数组顺序一致，可以更简化：

const array = Object.values(this.AddStatusBoxForm.value);

• 方法2：监听表单变化自动同步数组
  如果需要随时拿到最新的数组值，可以订阅表单的valueChanges事件，表单值变化时自动更新数组：

import { Subscription } from 'rxjs';

array: any[] = [];
private formSub?: Subscription;

ngOnInit() {
  this.formSub = this.AddStatusBoxForm.valueChanges.subscribe(formVal => {
    this.array = [formVal.cpuTempTopic, formVal.uptimeTopic, formVal.timeTopic];
    // 也可以用简化写法 this.array = Object.values(formVal);
  });
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  this.formSub?.unsubscribe();
}

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