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

113

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

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

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

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

Спасибо.

Нир Шварц
источник
1
вот рабочий plnkr для того же plnkr.co/edit/MW3vT4XscWcKrDdAwBoE?p=preview
Pardeep Jain

Ответы:

173

Обновить

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

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

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

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

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

Демо здесь

Панкадж Паркар
источник
Хорошо, я добавляю, что ngClass уже находится в кнопке, поэтому мне кажется, что отключенный должен быть здесь, почему предпочтение отдается способу [disabled]?
Нир Шварц
@NirSchwartz, потому что он будет делать и то, и другое одновременно .. правила CSS селектора будут применяться к button[disabled]событию на основе селектора, а отключенное событие ограничит запуск clickсобытия на кнопке .. в ngClassклассе вещь вам нужно обрабатывать его самостоятельно, как я показал на ответ выше ..
Pankaj Parkar
Причина, по которой люди хотят использовать [attr.disabled], а не [disabled], заключается в том, что angular FormControl [disabled] не может быть установлен динамически. Вот вопрос github.com/angular/angular/issues/11271
davyzhang
1
Вы не должны вызывать метод в привязке шаблона. [disabled]="!isValid"
Том
3
Аххаа ... если у метода есть только ссылка на переменную, то все в порядке ... Если у вас сложная логика внутри функции, то это не рекомендуется. Вы правы, в этом случае я могу напрямую вызвать isValidфлаг в пользовательском интерфейсе
Панкадж Паркар 07
39

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

<button [disabled]="isInvalid()">Submit</button>
Проксимо
источник
4
Не лучше ли избегать вызовов функций в html, так как они будут вызываться каждый тик / цикл?
Джон
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="">

слабина
источник
3

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

<button [attr.disabled]="!isValid ? true : null">Submit</button>
Шиванг Гупта
источник
Это не является хорошим решением , так <button disabled="">или <button disabled="false">по - прежнему обрабатывается как кнопка инвалидов в большинстве браузеров
BillyTom
2

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

<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>
Притеш Агравал
источник
2

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

Сергей П. aka azure
источник
2

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

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>
Гук
источник
1
 <button [disabled]="this.model.IsConnected() == false"
              [ngClass]="setStyles()"
              class="action-button action-button-selected button-send"
              (click)= "this.Send()">
          SEND
        </button>

.ts код

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
Амир Туиту
источник