我有一个使用路由和模板驱动表单的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 {提交：true，_directives：Array（1），ngSubmit：EventEmitter，form：FormGroup}
formDirective：（...）
控件：（...）
路径：（...）
控件：（...）
值：对象
__proto__：对象
有效：（...）
无效：（...）
待定：（...）
禁用：（...）
启用：（...）
错误：（...）
原始：（ ...）
脏：真实
接触：真实
状态：（...）
未接触：（...）
statusChanges：（...）
valueChanges：（...）
提交：true
如果我不调用导航语句，则该语句可用。
我不明白，我在导航之前将其打印到控制台。
我在这里做错了什么？
谢谢！
这是因为你正在寻找的形式，但你有什么要包含在形成特定的值。将您的代码更改为以下内容：
onSubmit(serviceForm: NgForm){
console.log(serviceForm.value.endpoint);
}
我在stackblitz上创建了一个演示应用程序，它使用您的确切形式说明了这一点。另外-请务必阅读表格上的文档。
您正在记录对表单对象的引用，但是当您在dev工具中检查该引用时，您已经离开页面，因此表单值不可用。在MDN Web文档中对此进行了说明。特别：
请注意，如果您在最新版本的Chrome和Firefox中记录对象，则在控制台上登录的内容是对该对象的引用，在调用控制台时，它不一定是对象的“值”。 log（），但是它是打开控制台时对象的值。
试试看MDN建议：
记录对象
不要用
console.log(obj)，用console.log(JSON.parse(JSON.stringify(obj)))。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句