如何使用全局变量来启用或禁用Angular模板驱动的表单中的按钮？

Question

<a #globalVar>

<input [(ngModel)] = "newTitle"
            #newBlogTitle_l = "ngModel" >

<div *ngIf = 'newBlogTitle_l.value === "" ' >
  globalVar.value = false
</div>

<button (click) = "onSave()"   [disabled] = "globalVar" > Save </button>

如果输入框中没有任何内容，我希望该按钮保持启用状态。实现该目标的方法是什么？

（这仅是为了学习。）

Answer 1

[我认为您正在采用一种有角度的JS方法，我们可以在HTML中定义全局变量并设置值。为什么不将条件写在Disabled属性上，如下所示

<input [(ngModel)] = "newTitle"
            #newBlogTitle_l = "ngModel" />

<div *ngIf = "newBlogTitle_l.value" >
  test
</div>

<button (click) = "onSave()" [disabled] = "newBlogTitle_l.value" > Save </button>

https://stackblitz.com/edit/angular-vgxn4t?file=src/app/app.component.html

Answer 2

修改模板中变量的值不是一个好主意。从长远来看，这很难维护。变量修改几乎应该总是在控制器中完成。

此外，当绑定到[(ngModel)]的变量时，可以直接使用它来设置其他元素的状态。尝试以下]]

控制器

export class AppComponent  {
  newTitle: string;
}
模板

<input [(ngModel)]="newTitle">
<button [disabled]="newTitle">Click me</button>
工作示例：Stackblitz