如何使用全局变量来启用或禁用 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

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

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

控制器

export class AppComponent  {

  newTitle: string;

}

模板

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

<button [disabled]="newTitle">Click me</button>

Answer 2

我认为您将采用 Angular 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