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

有關更多詳細信息，請參閱此。