Wiem, że w angular2 mogę wyłączyć przycisk z atrybutem [disable] wyłączyć, na przykład:Angular2 przycisk
<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>
ale mogę to zrobić za pomocą [ngClass] lub [ngStyle]? Podobnie jak:
<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>
Dzięki.
zastanawiam. Dlaczego nie chcesz użyć wiązania atrybutów [disabled] dostarczonego przez Angular 2? Jest to właściwy sposób radzenia sobie z tą sytuacją. Proponuję przenieść twoje sprawdzanie isValid metodą komponentu.
isValidForm() {
return this.isValid;
}
<button [disabled]="!isValidForm()" (click)="onConfirm()">Confirm</button>
Zasadniczo można użyć ngClass tutaj. Ale dodanie klasy nie ograniczyłoby zdarzenia od ostrzału. Aby rozpocząć zdarzenie przy poprawnym wprowadzeniu, należy zmienić kod zdarzenia click na poniższy. Aby onConfirm został zwolniony tylko wtedy, gdy pole jest prawidłowe.
<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>
Cóż, dodam, że ngClass allready w przycisku, więc wygląda na to, że niepełnosprawny musi być na miejscu, dlaczego preferowana jest [wyłączona] droga? –
@NirSchwartz ponieważ spowoduje to obu rzeczy naraz. Selekcyjne reguły css zostaną zastosowane na 'button [disabled]' selektor i wyłączone zdarzenie ograniczy wydarzenie 'click' do uruchomienia na przycisku .. w klasie' ngClass' rzeczą, którą musisz obsłużyć samodzielnie, jak pokazałem w powyższej odpowiedzi. –
OK, rozumiem. Dziękuję. –
Tak można
<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
Polecam następujące.
<button [disabled]="isInvalid()">Submit</button>
Ta odpowiedź jest bardzo dobra, ale prawdopodobnie masz na myśli "isInvalid()". Jaki jest sens wyłączenia przycisku dla prawidłowego formularza? – tommybernaciak
Próbowałem używać wyłączone wraz ze zdarzeniem kliknięcia. Poniżej znajduje się urywek, zaakceptowana odpowiedź działa również doskonale, dodam tę odpowiedź, aby dać przykład, jak można go użyć z wyłączonymi i kliknij właściwości.
<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>
Jeśli masz formę następnie następujące możliwe jest również:
<form #f="ngForm">
<input name="myfield" type="text" minlenght="3" required ngModel>
<button type="submit" [disabled]="!f.valid">Submit</button>
</form>
Demo tutaj: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts
Jeśli używasz form reaktywnych i chcesz wyłączyć pewne wejście powiązany z formą kontroli, powinieneś umieścić tę logikę disabled w swoim kodzie i zadzwonić pod numer yourFormControl.disable() lub yourFormControl.enable()
Korzystanie ngClass wyłączenie przycisku dla nieprawidłowego formularza nie jest dobrą praktyką w Angular2, gdy zapewnia wbudowane funkcje umożliwiające włączanie i wyłączanie przycisku, jeśli formularz jest prawidłowy i nieważny, odpowiednio, bez dodatkowego wysiłku/logiki.
[disabled] zrobi wszystko, jeśli formularz jest ważny, zostanie włączony, a jeśli formularz jest nieprawidłowy, zostanie automatycznie wyłączony.
Patrz Przykład:
<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="">
może być poniżej kod może pomóc:
plnkr<button [attr.disabled]="!isValid ? true : null">Submit</button>
tu pracuje dla tego samego http://plnkr.co/edit/MW3vT4XscWcKrDdAwBoE? p = preview –