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

Question

我有一个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（）之后调用Navigation语句时，

“ Endpoint”在ngForm.value中不可用。这是console.log的输出：
NgForm {提交：true，_directives：Array（1），ngSubmit：EventEmitter，形式：FormGroup}formDirective：（...）控制： （...）路径：（...）控制项：（...）
值：对象__proto__：对象

有效：（...）无效：（...）待处理：（...）禁用：（...）已启用：（...）错误：（...）原始的：（...）脏：真感动：真实状态： （...）不变的：（...）statusChanges：（...）valueChanges：（...）提交：true如果我不调用导航语句，则可以使用。

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

我在这里做错了什么？

谢谢！

我有一个Angular 8应用，该应用使用路由和模板驱动的表单。我在component.html中有一个简单的表单：

]

这是因为您正在查看表单，但是

want是表单中包含的特定值。将您的代码更改为以下内容：

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

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

Answer 1

这是因为您正在查看表单，但是

want是表单中包含的特定值。将您的代码更改为以下内容：