Eu sei que no angular2 posso desabilitar um botão com o
[disable]
atributo, por exemplo:
<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>
mas posso fazer isso usando [ngClass]
ou [ngStyle]
? Igual a:
<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>
Obrigado.
html
angular
angular2-template
angular2-forms
Nir Schwartz
fonte
fonte
Respostas:
Atualizar
Estou pensando. Por que você não quer usar a
[disabled]
associação de atributos fornecida pelo Angular 2? É a maneira correta de lidar com essa situação. Proponho que você mova seuisValid
cheque por meio do método de componente.O problema com o que você tentou explicado abaixo
Basicamente, você pode usar
ngClass
aqui. Mas adicionar classe não restringiria o evento de disparar. Para disparar o evento em uma entrada válida, você deve alterar oclick
código do evento abaixo. Portanto, issoonConfirm
será acionado apenas quando o campo for válido.Demonstração aqui
fonte
button[disabled]
seletor e o evento desabilitado restringirá oclick
evento para disparar no botão .. nangClass
aula, você precisa lidar com isso sozinho, como mostrei em resposta acima ..[disabled]="!isValid"
isValid
sinalizador na IUEu recomendaria o seguinte.
fonte
sim você pode
https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
fonte
Se você tiver um formulário, o seguinte também é possível:
Demonstração aqui: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts
fonte
Usar
ngClass
para desabilitar o botão para formulário inválido não é uma boa prática no Angular2 ao fornecer recursos embutidos para habilitar e desabilitar o botão se o formulário for válido e inválido, respectivamente, sem fazer nenhum esforço / lógica extra.[disabled]
fará tudo como se o formulário for válido, então ele será habilitado e se o formulário for inválido, ele será desabilitado automaticamente.Consultar exemplo:
fonte
Pode estar abaixo do código pode ajudar:
fonte
<button disabled="">
ou<button disabled="false">
ainda é tratada como um botão desativado na maioria dos navegadoresTentei usar disabled junto com o evento click. Abaixo está o snippet, a resposta aceita também funcionou perfeitamente. Estou adicionando esta resposta para dar um exemplo de como ela pode ser usada com as propriedades disabled e click.
fonte
Se você estiver usando formulários reativos e quiser desabilitar alguma entrada associada a um controle de formulário, você deve colocar essa
disabled
lógica em seu código e chamaryourFormControl.disable()
ouyourFormControl.enable()
fonte
Eu acho que essa é a maneira mais fácil
fonte
código .ts
fonte