Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Diferenças nas angular expressions do componente "botao".

Olá! No vídeo 2 da aula 6 do curso de angular 2, é mostrado como fazer o template html do componente "botao". É explicado que pode ser usado tanto angular expression proveniente do Angular 1

var = {{angular 1 expression}}

quanto a do Angular 2

[var] = angular 2 expression

Portanto, acabei utilizando a seguinte formatação:

<button (click)="executaAcao()" class="btn {{estilo}}" type="{{tipo}}" disabled="{{desabilitado}}">{{nome}}</button>

Porém, ao utilizar o componente "botao" para salvar o cadastro, vinculando o disabled com o meuForm.invalid, ele não funciona (o botão de salvar na página fica sempre desabilitado).

Só consegui fazer funcionar o vinculo quando mudei a formatação do template para

<button (click)="executaAcao()" class="btn {{estilo}}" type="{{tipo}}" [disabled]="desabilitado">{{nome}}</button>

Agora vem a duvida: Se eu posso usar os 2, não deveria funcionar o vínculo com o meuForm.invalid da mesma maneira?

Obrigado.

3 respostas
solução!

Quando você usa [desabilitado]="!meuForm.valid", o angular avaliará o valor da expressão toda vez que ele mudar atualizando o valor passado para desabilitado.

Agora, dentro do seu template do componente botão, quando você deixou de usar [] e passou a usar o {{}} você esta lendo o valor assim como [], mas ele não será atualizado. Se você mudar o valor, seu componente guardará o valor inicial e não mudará. Por isso sempre fica habilitado.

Obrigado!

Em algum momento utilizando o Angular 2, vai ser melhor usar {{}} ao invés de [] , para montar um template html por exemplo?

TIpo, você pode usar essa seguinte regrinha que eu uso. Se é para exibir algo como conteúdo de uma tag, tipo, h2, você usa a Angular Expression. Para o restante, o [].

Essa parte do Angular é meia confusa mesmo. Estou trabalhando com Vue.js agora e uma das coisas que o criador quis resolver é essa questão, deixar mais claro.