Angular - 将 FormBuilder 值传递给 Array 会导致空字符串值答案

【问题标题】：Angular - Passing FormBuilder values to Array results in empty string valuesAngular - 将 FormBuilder 值传递给 Array 会导致空字符串值
【发布时间】：2021-10-24 12:26:59
【问题描述】：

我有一个使用 Angular 的 FormBuilder 填写的表单。这是组件打字稿文件中的 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))

对此的任何帮助将不胜感激。

【问题讨论】：

标签： data-structures angular-forms angular2-formbuilder angular-arrays

【解决方案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 documentation探索更多关于表单组的信息。

【讨论】：