如何获取未更新的响应式表单数据？

Posted 2023-02-22

【中文标题】如何获取未更新的响应式表单数据？

【英文标题】：How to get reactive form data that wasn't updated?

【发布时间】：2019-12-30 03:30:03

【问题描述】：

蓝光： 最终，我只是想让这一段代码发挥作用，但我无法获得具有更新值且没有空值的完整对象：

this.store.dispatch(new fromStore.UpdateObject(
  
    id: this.object$['id'],
    name: this.object$['name'],
    location: this.object$['location']
  
));

背景：

我有一个带有 name 和 location 的简单响应式表单：

<input formControlName="location" type="text" value=" location "  />

我的构造函数是这样设置的：

  constructor(
    ...
    private formBuilder: FormBuilder
    )  
      this.myDataForm = this.formBuilder.group(
        'name':     ['', Validators.required ],
        'location': ['', Validators.required ]
      );
  

当我尝试获取我的数据时，如下所示：

console.log(this.myDataForm.value.location);

我只获取已更新字段的值。用户未更改的任何字段都返回空。

所以我的问题变成了：如何将一个完整的对象发送到服务器进行存储？我尝试了不同的循环来使用现有对象和更新的值来创建一个新的、完整的对象以发送到服务器，但是由于我的原始对象是可观察的，所以我不断收到不同的错误。

更新：看起来我可能需要将我的可观察数据正确连接到我的反应形式。我认为它与patchValue有关，但仍然无法弄清楚。这是我用来获取可观察数据的代码（匹配 ID 以从数组中过滤 1）：

this.soldier$ = this.store.select(fromStore.getAllSoldiers).pipe(map(
  soldiers => soldiers.filter(s => s.id === params.get('id'))[0],
));

【问题讨论】：

不放 value=location，只放 '`。如果你想给一个初始值，你可以在创建表单时做，例如'name':['我的名字',Validatros.required]

啊，谢谢。我不认为这是答案，但它仍然有帮助。我正在关注几篇不同的文章来完成这项工作，但显然我仍然做错了一些事情！

我需要更多信息，但你试过console.log(this.myDataForm.getRawValue()) 看看你得到了什么？

是的。当我编辑“名称”时，我得到名称（用户输入）和位置 =“”。当我编辑位置时，我得到相反的结果。当我编辑两者时，我都得到了。无=无。在我按照其他人的建议删除 value=location 后，表单呈现时没有我的默认值，所以我目前正在尝试弄清楚如何取回它们

顺便说一句，@Eliseo 是对的。不要使用value 更新或初始化您的控件。

【参考方案1】：

使用 ngModel 代替 value=

<input formControlName="location" type="text" [(ngModel)]="myDataForm.value.location" />

ngModel 会随着 myDataForm 中的值的更新而反应性地更新表单值。

【讨论】：

它给了我一个折旧错误（并且没有连接我的数据）：看起来您在与 formControlName 相同的表单字段上使用 ngModel。 Angular v6 中已弃用对使用 ngModel 输入属性和 ngModelChange 事件的响应式表单指令的支持，并将在 Angular v7 中删除。

你运行的是什么版本的 Angular？

8.2.1。我想我现在很接近了......只是试图将数据正确连接到表单。似乎我可能需要以某种方式从我的可观察到的形式修补值。现在正在努力...

@kenef，不要同时使用 formControlName 和 [ngModel] 这是不正确的。 [ngModel] 关联一个模板驱动表单，formControlName 关联一个 Reactive Forms

从 Angular 7+ 开始，是的，否则没有 @Eliseo