代码之家 › 专栏 › 技术社区 › Aquarius_Girl

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

angular html javascript

Aquarius_Girl · 技术社区 · 5 年前

<a #globalVar>

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

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

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

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

(这只是为了学习。)

0 回复 | 直到 5 年前

Michael D 5 年前

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

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

控制器

export class AppComponent  {
  newTitle: string;
}

模板

<input [(ngModel)]="newTitle">
<button [disabled]="newTitle">Click me</button>

工作示例: Stackblitz

Naren Murali 5 年前

我认为你会选择一种有角度的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