dictionary - Angular - 将 FormBuilder Form.group 中的表单值添加到 Map 数据结构中

Question

我有一个名为AddStatusBoxForm的FormBuilder表单组：

AddStatusBoxForm = this.Form.group({
    name: ['']
  });

然后我有一个Map数据结构，我认为它的类型为Map<string, string>：

statusBoxValues = new Map<string, string>
  ([
    ['name', this.AddStatusBoxForm.get('name')?.value]
  ]);

Map数据结构作为 map 中的this.AddStatusBoxForm.get('name')?.value项目，键是字符串'name'。

我用console.log(). 首先，我打印出从AddStatusBoxForm中检索到的值的类型，它返回一个string类型。然后我以返回相同值的形式打印出输入的实际值。最后，我尝试打印出我的statusBoxValues Map中的第一项，其中包含用于从AddStatusBoxForm 表单组中检索值的相同代码。但是，当我希望它返回输入到表单中的值时，这会返回空字符串。

console.log(typeof(this.AddStatusBoxForm.get('name')?.value)) //returns string
console.log(this.AddStatusBoxForm.get('name')?.value) // returns value of input 
console.log(this.statusBoxValues.get('name')) // returns <empty string>

谁能帮助我，以便我可以将表单组中的值添加到Map数据结构中，或者可能是具有键对值的等值数据结构？

谢谢。

Answer 1

您的问题是，this.AddStatusBoxForm.get('name')?.value当您将其添加到地图时，它只会触发一次。

试试这个：

var statusBoxValues = {
  'name': () => this.AddStatusBoxForm.get('name')?.value,
  'otherName': () => this.AddStatusBoxForm.get('otherName')?.value,
};

然后，您可以像这样调用该函数：

this.statusBoxValues['name']();