Angular ngForm参考变量返回null

Question

I have a model in my component class like so:

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 => {...});
}

And a component template like:

<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

I did import the forms module in my feature module:

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

I am giving data to the agentDetailsCompany object in the ngOnInit hook, inside a subscription of a BehaviorSubject as an observable, which is initialized with null.

The parent of the this component is the one passing an object with values to the BehaviorSubject as an observable, thus the form data is available when the template is rendered.

When the form is rendered, the fields are filled with values from ngOnInit, but the ngForm is still undefined, am I missing something here, please assist me guys.

I have read the angular docs for both template driven and model driven forms but nowhere there is clue of the cause of my issue.

I am using angular 4, could this have an effect? thanks.

Answer 1

I made an error by placing the log out of the 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.    

so the ref variable was really undefined by the time I was trying to log it.