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>

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

在console.log（）之后调用navigate语句时，“Endpoint”在ngForm.value中不可用。以下是console.log的输出：

NgForm{submitted:true，_指令：数组（1），ngSubmit:EventEmitter，form:FormGroup}
formDirective:（…）
控制：（…）
路径：（…）
控件：（…）
值：对象
__原型：对象
有效：（…）
无效：（…）
待定：（…）
禁用：（…）
已启用：（…）
错误：（…）
原始：（…）
肮脏：真实
触摸：正确
状态：（…）
未触及：（…）
状态更改：（…）
值更改：（…）
提交：正确

如果我不调用navigate语句，它是可用的

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

我做错了什么

---

谢谢

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

onSubmit（serviceForm:NgForm）{
日志（serviceForm.value.endpoint）；
}

我创建了一个使用您的确切形式来说明这一点的。另外，一定要阅读

编辑以解决已编辑的问题 您正在记录对表单对象的引用，但是当您在开发工具中检查它时，您已经离开了页面，因此表单值不可用。这一点在本节中进行了解释。具体而言：

请注意，如果您在最新版本的Chrome和Firefox中记录对象，那么您在控制台上记录的是对该对象的引用，它不一定是您调用console.log（）时该对象的“值”，而是您打开控制台时该对象的值

尝试一下MDN建议：

日志对象 不要使用

console.log（obj）

，使用

console.log（JSON.parse（JSON.stringify（obj））

---

Dean-请看上面的粗体文本…端点不在值键中，因为我在…之后立即进行路由…这就是问题所在，serviceForm.value.endpoint仅在我不在console.log之后调用路由语句的情况下才可用，我希望能够路由…这是对

console.log

到底在做什么的误解。我编辑了我的答案来回答你编辑过的问题。就这样。感谢院长的帮助！