Как использовать глобальную переменную для включения или отключения кнопки в шаблонах, управляемых шаблонами 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>

Рабочий пример: Stackblitz

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