时间戳

首页 > 解决方案 > Angular 8 应用程序在使用 router.navigate 时无法检索表单字段值

angular - Angular 8 应用程序在使用 router.navigate 时无法检索表单字段值

问题描述

我有一个使用路由和模板驱动表单的 Angular 8 应用程序。

我在component.html 中有一个简单的表单：

<form (ngSubmit)="onSubmit(serviceForm)" #serviceForm="ngForm">
  <input type="text" name="endpoint" ngModel>
  <button class="btn btn-success" type="submit">Submit</button>
</form>

component.ts中的处理程序：

onSubmit(serviceForm:NgForm){
  console.log(serviceForm);
  this.router.navigate(['/view-service']);
 }

当我在 console.log() 之后调用导航语句时，ngForm.value 中没有“端点”。这是 console.log 的输出：

NgForm {submitted: true, _directives: Array(1), ngSubmit: EventEmitter, form: FormGroup}
formDirective: (...)
control: (...)
path: (...)
controls: (...)
value ：对象
__proto__：对象
有效：（...）
无效：（...）
待定：（...）
禁用：（...）
启用：（...）
错误：（...）
原始：（ ...）
脏：真
感动：真
状态：（...）
未动：（...）
statusChanges：（...）
valueChanges：（...）
提交：真

如果我不调用导航语句，它是可用的。

我不明白，我在导航之前打印到控制台。

我在这里做错了什么？

谢谢！

标签： angulartemplatesroutingngmodel

解决方案

这是因为您正在查看表单，但您想要的是表单中包含的特定值。将您的代码更改为以下内容：

onSubmit(serviceForm: NgForm){
  console.log(serviceForm.value.endpoint);
}

我在 stackblitz 上创建了一个演示应用程序，使用您的确切形式说明了这一点。另外——请务必阅读表格上的文档。

编辑以解决您编辑的问题

您正在记录对表单对象的引用，但是当您在开发工具中检查它时，您已经离开页面，因此表单值不可用。这在MDN Web Docs中有解释。具体来说：

请注意，如果您在最新版本的 Chrome 和 Firefox 中记录对象，您在控制台上记录的内容是对对象的引用，这不一定是您调用控制台时对象的“值”。 log()，但它是打开控制台时对象的值。

试试 MDN 的建议：

记录对象

不使用console.log(obj)，使用console.log(JSON.parse(JSON.stringify(obj)))。

推荐阅读