NG Bootstrap modal disable a button in the modal's template

I'm using Angular 17 and ng-bootstrap 16 and I'm creating an ng-bootstrap modal. I have a Template in my component used as the content for the modal. What I want is to enable or disable the Save button in the modal when the one input element in the modal's form is blank. I disable the button by default and in the change event of the input I'm toggling the disabled state of the button. I can get it to enable the button when text is entered but it won't disable the button when I delete the text of the input. Below is the template.

<ng-template #getReportName let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Report File Name</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
</div>
<div class="modal-body">
<form #reportNameForm>
<div class="mb-3">
<label for="reportname">Report Name</label>
<div class="input-group">
<input #reportInput
id="reportname"
class="form-control"
placeholder="Report Name"
name="filename"
(change)="this.saveButton.disabled=(this.value==='')"
/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button #saveButton type="button" class="btn btn-outline-secondary" disabled="true" (click)="modal.close(reportInput.value)">Save</button>
</div>
</ng-template>



Not sure what's going wrong.

Continue reading...