input type="text" inside modal-body is undifiend

Question

I'm trying to get value from input inside modal-body and the object is undifiend.

I have the following code:

in .html:

<ng-template #myModal>
    <div class="modal-header">
        <h1>Title</h1>
    </div>
    <div class="modal-body" style="overflow-warp: break-word;">
        <p>
            Enter ID: <input autofocus type="text" #workerId>
        </p>
    </div>
    <div class="modal-footer">
        <button type="submit" (click)="Confirm()" label="Submit"></button>
    </div>
</ng-template>

And in .ts:

let id = this.workerId.nativeElement.value;//Undifiend

How can I solve it?

Thanks.

Answer 1

Try to you use [(ngModel)] bindings to get value of text box.

HTML

<input autofocus type="text" [(ngModel)]="workerId">

TS

let id = this.workerId;