Question

我的组件类中有一个模型，如下所示：

agentDetailsCompany: ICompanyDetails = {
 company_name: '',
 company_reg_number: '',
 website: '',
 agent_details: {
  contact_number: '',
  email_address: '',
  physical_address: '',
},
 agent_type: '',
};

...
isComponentActive = true;
... 
ngOnInit(): void {
this.agentDataService.agentDataObject$
.takeWhile(() => this.isComponentActive)
.subscribe(
  agentDetails => {
    this.agentDetailsCompany = agentDetails;
  },
  err => {...});
}

和组件模板如：

<form #myForm="ngForm">
  <input name="companyName" [(ngModel)]="agentDetailsCompany.company_name">
  ...
</form>
{{myForm.value | json}} //this here gives me an error that myForm is undefined
{{myForm?.value | json}} //this returns me null

我确实在我的功能模块中导入了表单模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
...
imports: [
    FormsModule
 ...
],

我将数据提供给 ngOnInit 钩子中的 agentDetailsCompany 对象，在BehaviorSubject的订阅中作为observable，用null初始化。

此组件的父组件是将具有值的对象作为可观察对象传递给BehaviorSubject，因此表单数据在呈现模板时可用。

当表单呈现时，字段用ngOnInit中的值填充，但是ngForm仍未定义，我在这里遗漏了一些东西，请帮助我们。

我已经阅读了模板驱动和模型驱动形式的角度文档，但没有任何关于我的问题的原因的线索。

我正在使用角度4，这会产生影响吗？感谢。

Answer 1

我将日志从div中删除，

<div *ngIf="...">
  <form #myForm="ngForm">
    <input name="companyName" [(ngModel)]="agentDetailsCompany.company_name">
  </form>
</div>

{{myForm.value | json}} //this here was undefined because I had a div that wrapped the form and it had a condition to decide if to render the form.

因此，当我尝试记录时，ref变量确实未定义。

Angular ngForm引用变量返回null

1 个答案: