Кнопка отключения Angular2

Я знаю, что в angular2 Я могу отключить кнопку с [disable], например: 

<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>

но я могу сделать это с помощью [ngClass] или [ngStyle] ? Вот так:

<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>

спасибо.

10 86
angularjs html angular2-template angular2-forms

10 ответов:

обновление

мне интересно. Почему вы не хотите использовать [disabled] привязка атрибутов, предоставленная Angular 2? Это правильный способ справиться с этой ситуацией. Я предлагаю вам переместить ваш isValid проверьте через компонентный метод.

<button [disabled]="! isValid" (click)="onConfirm()">Confirm</button>

проблема с тем, что вы пытались объяснить ниже

в принципе, вы могли бы использовать ngClass здесь. Но добавление класса не будет ограничивать событие от стрельбы. Для запуска события на действительном входе, вы должны изменить click код события ниже. Так что onConfirm будет уволен только тогда, когда поле является допустимым.

<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>

Демо Здесь

122

Я бы рекомендовал следующее.

<button [disabled]="isInvalid()">Submit</button>
35

да

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
         (click)="toggle(!isOn)">
         Click me!
 </div>

https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

5

Если у вас есть форма, то также возможно следующее:

<form #f="ngForm">
    <input name="myfield" type="text" minlenght="3" required ngModel>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

демо здесь: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

5

используя ngClass чтобы отключить кнопку для недействительной формы не является хорошей практикой в Angular2, когда его предоставление встроенных функций для включения и отключения кнопки, если форма действительна и недействительна соответственно без каких-либо дополнительных усилий/логики.

[disabled] будет делать все, как если форма действительна, то она будет включена, и если форма недействительна, то она будет отключена автоматически.

Пример:

<form (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
<input type="text" placeholder="Name" [(ngModel)]="txtName" name="txtname" #textname="ngModel" required>
<input type="button" class="mdl-button" [disabled]="!f.form.valid" (click)="onSave()" name="">

4

может быть ниже код может помочь:

<button [attr.disabled]="!isValid ? true : null">Submit</button>
3

Я попытался использовать disabled вместе с событием click. Ниже приведен фрагмент, принятый ответ также работал отлично, я добавляю этот ответ, чтобы дать пример того, как его можно использовать с отключенными и нажмите Свойства.

<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>
2

Если вы используете реактивные формы и хотите отключить некоторые входные данные, связанные с элементом управления формой, вы должны разместить это disabled логика в вас код и вызов yourFormControl.disable() или yourFormControl.enable()

2
 <button [disabled]="this.model.IsConnected() == false"
              [ngClass]="setStyles()"
              class="action-button action-button-selected button-send"
              (click)= "this.Send()">
          SEND
        </button>

.код ТС

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
1

Я думаю, что это самый простой способ 

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>
1