Angular-在组件模板中声明变量

Question

我必须根据文本框中的值来禁用/启用按钮。

这是我目前的做法

<input [(ngModel)]="confirmationText" type='text'>
<button [disabled]="confirmationText != 'yes'">Delete</button>

问题：此方法可行，但我必须在我的component.ts文件中声明confirmationText，并且只能在模板中使用，所以我我正在寻找一种在组件模板中进行声明的方法，以便使组件类保持整洁。

Stackblitz

Answer 1

您可以使用template reference variable来实现所需的功能。请注意，必须在输入元素上设置ngModel指令，以使其起作用。

<input #textInput type="text" ngModel>
<button [disabled]="textInput.value !== 'yes'">Delete</button>

有关演示，请参见this stackblitz。

Answer 2

您必须像这样在模板引用中获取值

<input [(ngModel)]="confirmationText" type='text' #myInput> <button [disabled]="myInput.value != 'yes'">Delete</button>

看看我的解决方案

stackblitz