Отключить кнопку в angular 2 с двумя условиями

Возможно ли это в angular 2?

<button type="submit" [disabled]="!validate && !SAForm.valid">Add</button>

Я ожидаю, что если оба условия верны, они активируют кнопку.

Я уже пробовал вышеуказанный код, но он не работает должным образом.

Ответ 1

Похоже, вам нужен OR:

<button type="submit" [disabled]="!validate || !SAForm.valid">Add</button>

Это приведет к отключению кнопки, если не подтвердится, или если не SAForm.valid.

Ответ 2

Объявите переменную в component.ts и инициализируйте ее некоторым значением

 buttonDisabled: boolean;

  ngOnInit() {
    this.buttonDisabled = false;
  }

Теперь в .html или в шаблоне вы можете поместить следующий код:

<button disabled="{{buttonDisabled}}"> Click Me </button>

Теперь вы можете включить/отключить кнопку, изменив значение переменной buttonDisabled.

Ответ 3

В дополнение к другому ответу я хотел бы отметить, что это обоснование также известно как закон де Моргана. Это на самом деле больше о математике, чем программировании, но это настолько фундаментально, что каждый программист должен знать об этом.

Ваша проблема началась так:

enabled  = A and B
disabled = not ( A and B )

Пока все хорошо, но вы пошли еще дальше и попытались снять брекеты. И это немного сложно, потому что вы должны заменить and/&& на or/|| ,

not ( A and B ) = not(A) OR not(B)

Или в более математической записи:

enter image description here

Я всегда помню этот закон всякий раз, когда упрощаю условия или работаю с вероятностями.

Ответ 4

Использование троичного оператора возможно следующим образом: [отключено] внутренне требуется true или false для его работы.

<button type="button" 
  [disabled]="(testVariable1 != 0 || testVariable2!=0)? true:false"
  mat-button>Button</button>

Ответ 5

Возможно ли это в angular 2?

Да, это возможно.

Если оба условия верны, они будут включать кнопку?

Нет, если они верны, кнопка будет отключена. disabled="true".

Я пробую код выше, но он не работает хорошо

Чего вы ожидали? кнопка будет отключена, если valid - false, а angular formGroup, SAForm недействителен.

Рекомендация здесь также, пожалуйста, введите кнопку кнопки типа не submit, потому что это может привести к отправке всей формы, и вам нужно будет использовать invalidate и слушать (ngSubmit).