如何使用全局变量来启用或禁用 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&nbsp; {&nbsp; newTitle: string;}模板<input [(ngModel)]="newTitle"><button [disabled]="newTitle">Click me</button>

Answer 2

我认为您将采用 Angular JS 方法，我们可以在 HTML 中定义全局变量并设置值。为什么不直接在 disabled 属性上写条件，如下所示<input [(ngModel)] = "newTitle"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #newBlogTitle_l = "ngModel" /><div *ngIf = "newBlogTitle_l.value" >&nbsp; test</div><button (click) = "onSave()" [disabled] = "newBlogTitle_l.value" > Save </button>https://stackblitz.com/edit/angular-vgxn4t?file=src/app/app.component.html