Question

我有一些字段的模板驱动表单。在某些条件评估为真之前，不会显示此表格。当这些字段的值发生变化时，我想得到通知。所以我有以下代码：

HTML：

<form *ngIf="aCondition" #myForm="ngForm">
...
</form>

组件：

@ViewChild('myForm') myForm: NgForm

aCondition: boolean = false;

ngOnInit() {
    this.myForm.form.valueChanges.subscribe(...);
}

changeCondition() {
    this.aCondition = true;
    this.myForm.form.valueChanges.subscribe(...);
}

但是在两个事件/功能中，this.myForm都是undefined。有什么想法吗？

Answer 1

当您将*ngIf附加到元素上并且得出的值为false时，它甚至不会在DOM中呈现。这意味着它将不会作为ViewChild拾取，因此将保持未定义状态。

关于ViewChild的另一件需要记住的事情是，在AfterViewInit生命周期钩子之前，不会捡起任何东西，因此任何时候您需要将某些东西附加到ViewChild上，都可以在{{1}内部进行}，以确保它在那里。

Answer 2

要使用ngIf引用 ViewChild ，您必须使用设置器，当条件为真时调用

private myForm: NgForm;

@ViewChild('myForm') set formRef(formRef: NgForm) {
 this.myForm= formref;
}

角度检测形式变化

2 个答案: