提问者:小点点

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


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

HTML

<form (ngSubmit)="submit()" class="form-horizontal" #opportunityForm="ngForm">
...

机会组成部分ts

export class OpportunityComponent implements OnInit {

  @ViewChild('opportunityForm') ngForm: NgForm;

  ngOnInit(): void {
    ...
    this.formChangesSubscription = this.ngForm.form.valueChanges.subscribe(x => {
      console.log(x);
    })

但它得到了一个错误:

TypeError: Cannot read property 'form' of undefined

因为表格没有初始化。这是一个类似的问题:如何倾听角度模板驱动的表单更改,这个问题在https://ng-run.com/edit/CGoUiw88N7OmI7x0YmHJ这也有同样的问题。

在侦听更改之前,如何获取表单并确保它存在?我使用的是Angular 10.2。0

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

<div *ngIf="loaded">

这是在ngOnInit中的api调用后设置的

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);
        });

输出true(对于已加载)和undefined(对于此.ngForm)。

更新*

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


共1个答案

匿名用户

尝试将static:true选项添加到@ViewChild装饰器:

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

Ng运行示例

否则,您必须将订阅移动到ngAfterViewInithook