Angular - 将 FormBuilder 值传递给数组导致空字符串值

Question

我有一个使用 Angular 的FormBuilder填写的表单。 这是组件 typescript 文件中的FormBuilder表示：

constructor(private Form: FormBuilder) { }

AddStatusBoxForm = this.Form.group({
    cpuTempTopic: [''],
    uptimeTopic: [''],
    timeTopic: [''],
  });

我想创建一个数据结构，我可以将这些表单值放入其中，如下所示：

array: any[] = [this.AddStatusBoxForm.get('cpuTempTopic')?.value, 
                  this.AddStatusBoxForm.get('uptimeTopic')?.value, 
                  this.AddStatusBoxForm.get('timeTopic')?.value];

但是，控制台记录数组会导致空字符串。 然而，如果我控制台自己记录FormBuilder值，它们会打印出来：

console.log(this.AddStatusBoxForm.get('cpuTempTopic')?.value) // prints out fine
console.log(this.AddStatusBoxForm.get('uptimeTopic')?.value)
console.log(this.AddStatusBoxForm.get('timeTopic')?.value)
console.log(this.array) // prints out empty string 

我不明白为什么会这样，我似乎无法将FormBuilder值传递给任何类型的数据结构。 我还尝试了Map ，同样的情况发生在传入的值似乎以数据结构中的空字符串结尾的地方。 然而，单独访问FormBuilder值似乎工作正常。

我什至尝试通过控制台记录来自FormBuilder的值的类型，结果为字符串：

console.log(typeof(this.AddStatusBoxForm.get('cpuTempTopic')?.value))

对此有任何帮助，我们将不胜感激。

Answer 1

这是因为最初FormBuilder的所有属性都是用空字符串初始化的，因此将它们的值存储到数组中时将得到空字符串值。 您需要订阅FormGroup的值更改，以便实时更新您的数组值。 您可以参考下面的示例并相应地修改您的代码。

addStatusBoxFormChangesSubscription: Subscription;

ngOnInit(): void {
this.addStatusBoxFormChangesSubscription = merge(
      this.AddStatusBoxForm.get('cpuTempTopic').valueChanges,
      this.AddStatusBoxForm.get('uptimeTopic').valueChanges,
      this.AddStatusBoxForm.get('timeTopic').valueChanges
    ).subscribe(() => (this.array = [this.AddStatusBoxForm.get('cpuTempTopic')?.value, 
                  this.AddStatusBoxForm.get('uptimeTopic')?.value, 
                  this.AddStatusBoxForm.get('timeTopic')?.value];));
}

ngOnDestroy(): void {
    this.addStatusBoxFormChangesSubscription?.unsubscribe();
  }

当不再在同一页面上工作时，取消订阅始终是一个好习惯。 您可以在此处探索有关表单组的更多信息FormGroup 文档。