在Angular 10中收听模板驱动的表单更改

我在angular 10应用程序中有一个模板驱动的表单，我正在尝试侦听该表单的更改，以便向用户显示“已更改，请提交更新”消息

HTML

但它得到了一个错误：

TypeError: Cannot read property 'form' of undefined

因为表格没有初始化。这是一个类似的问题：哪个有一个连续的答案，哪个有相同的问题

在侦听更改之前，如何获取表单并确保它存在？我使用的是Angular 10.2.0

不确定这是否有区别，但整个页面都被包装在

<div *ngIf="loaded">

输出true（对于已加载）和undefined（对于此.ngForm）

更新*

---

所以它看起来确实像是因为我只有在数据到达bac后才加载了整个表单。因为它不在页面上，所以@ViewChild可以钩住它。我将我的*ngIf放在表单中的一个div上，它工作正常

尝试向

@ViewChild

装饰器添加

静态：true

选项：

@ViewChild('opportunityForm', { static: true }) ngForm: NgForm;

---

否则，您必须将订阅移动到

ngAfterViewInit

hook

我添加了更新的ng运行示例。如果它仍然不适用于您，那么您有一些带有

*ngIf

的包装器，可以像这里一样使用setter for ViewChild谢谢。我在stackblitz中设置的所有演示都按预期工作。这一定与我的配置有关

<div *ngIf="loaded">

ngOnInit(): void {
  this.dataService.getOpportunity(this.id)
        .subscribe(data => {
           ...  //fills the data up
        }, error => console.error(error),
        () => {
            console.log(this.loaded);
            console.log(this.ngForm);
        });

@ViewChild('opportunityForm', { static: true }) ngForm: NgForm;