如何将Angular表单数据提交到Firebase文档指定嵌套层级而非根路径

解决方法 #

你只需要调整提交数据时的构造逻辑，将表单值嵌套在Info字段层级下即可，不需要修改现有表单定义和数据填充逻辑，也不需要引入父FormGroup。

核心修改点

你当前的代码是直接把表单的所有字段平铺传入Firestore的set方法，因此会默认写入文档根路径。只要把表单值包裹在Info属性中，就能对应写入文档的嵌套Info层级。

修改后的updateCharacter方法代码如下：

updateCharacter() {
  // 将表单值嵌套到Info字段下
  const data = {
    Info: { ...this.infoForm.value }
  };
  this.firestore.doc(`${this.collection}/${this.charid}`).set(data, {merge: true});
} 

补充说明

• 你使用的{merge: true}参数会触发Firestore的深度合并逻辑，不会覆盖Info字段下没有出现在当前表单里的其他原有字段，符合增量更新的需求。
• 现有表单填充逻辑不需要调整，只要GetCharacterInfo()返回的是文档Info字段的内容，patchValue就能正常填充表单。

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