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

Posted 2023-02-22

【中文标题】Angular 8 应用程序在使用 router.navigate 时无法检索表单字段值

【英文标题】：Angular 8 app unable to retrieve form field value when using router.navigate

【发布时间】：2020-05-03 19:57:24

【问题描述】：

我有一个使用路由和模板驱动表单的 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: (...) 控制：(...) 路径：(...) 控件：(...)值：对象 __proto__: 对象 有效：(...) 无效：(...) 待定：(...) 已禁用：(...) 启用：(...) 错误：(...) 原始：（...） 脏：真的 感动：真的 状态：(...) 原封不动：(...) 状态变化：(...) 值更改：(...) 提交：真

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

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

我在这里做错了什么？

谢谢！

【参考方案1】：

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

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

我创建了一个demo app on stackblitz，使用您的确切形式说明了这一点。另外 - 请务必阅读the docs on forms。

编辑以解决您编辑的问题

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

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

试试 MDN 的建议：

记录对象

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

【讨论】：

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

这是对console.log 到底在做什么的误解。我编辑了我的答案以解决您编辑的问题。

做到了。感谢院长的协助！