How to access the form inside dxTemplate inside Devextreme dxPopover in Angular2

Question

I need to subscribe to changes in a form that is inside a dxPopover as below, but the form is always undefined.

However, if I move the form outside of dxPopover, then there is no issues.

How to access the form element when it's inside the dxPopover?

Template:

<dx-popover 
                target="#button" 
                position="bottom"
                width="900px" 
                [visible]="true">

    <div *dxTemplate="let data of 'content'">
            <form  #form="ngForm" >
                <!-- form content -->
            </form>
    </div>
</dx-popover>

Component:

@ViewChild('form') form;

ngAfterViewInit() {
    console.log(this.form); // outputs 'undefined'

}

edit: Here is a plunk - https://plnkr.co/edit/nQJ0brGs0FlMBkexuavK

Answer 1

Since the contents of the dxPopover doesn't even exist in the DOM when the popover is hidden, it's not possible to do a @ViewChild on it.

However, accessing both forms is possible when the popover is shown.

Here is the updated plunk.