Angular 对用于属性绑定的模板参考变量的更改检测

Question

我在玩模板引用变量。 并考虑使用它的值来设置按钮上的 disabled 属性。 即禁用按钮，除非输入字段为非空。 我希望下面的代码可以工作，但即使在输入中输入了一些值，按钮也会保持禁用状态。

为什么 Angular 变化检测在这种情况下不起作用？

是否有另一种方法可以仅使用模板引用变量来实现这一目标？

代码写在 Angular 8 和节点 12.16.2

<div class="form-group col-md-6">
    <input #hello type="text" class="form-control" id="01">
</div>
<div class="form-group col-md-6">
    <button class="btn btn-primary" [disabled]="hello.value.length === 0">Deactivate</button>
</div>

Answer 1

您可以尝试ngForm结合ngModel指令来实现这一点，

<form #testForm="ngForm">
    <div class="form-group col-md-6">
        <input type="text" name="hello" ngModel class="form-control" id="01">
    </div>
    <div class="form-group col-md-6">
        <button class="btn btn-primary" [disabled]="testForm.value.hello.length === 0">
            Deactivate
        </button>
    </div>
</form>

{{testForm.value|json}}

演示： https://stackblitz.com/edit/angular-ivy-xtdm4k?file=src/app/app.component.html

有关更多详细信息，请参阅此。