3

Estou passando um sistema de web que possui Jquery para Angular 2. Tenho um botão que quando clicado ele adiciona dois inputs e junto com eles é criado um botão para excluir esses inputs. ( segue o código em Jquery )...

//Adiciona campos extra nos sócios
var campos_max = 10;   //max de 10 campos
var x = 1; // campos iniciais

$('#add_field').click (function(e) {
    e.preventDefault();     //prevenir novos clicks
        if (x < campos_max) {
                $('#listas').append('<div>\
                        <div class="form-group">\
 <label class="col-sm-2 control-label">Nome sócio:</label>\
 <div class="input-group">\
     <span class="input-group-addon">*</span>\
        <input class="form-control socio" name="nome[]" type="text" placeholder="Nome sócio..." required>\
 </div>\
   </div>\
   <div class="form-group">\
 <label class="col-sm-2 control-label">Participação (%):</label>\
 <div class="input-group">\
     <span class="input-group-addon">*</span>\
        <input class="form-control socio part" name="participacao[]" type="text" placeholder="Participação..." required number="true">\
 </div>\
   </div>\
    <input href="#" type="button" id="add_field" value="Remover campo" class="remover_campo btn btn-warning">\
                        </div>');
                x++;
        }
});

// Remover o div anterior
$('#listas').on("click",".remover_campo",function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
});

A dúvida é, como fazer isso no angular 2? Varri o google, só consegui achar algo pra adicionar com o ElmentRef, mas pra excluir não.

3
  • O framework Angular, de forma geral, está fortemente relacionado com a ideia de estado. Dessa forma, posso te adiantar que você não precisará, indiretamente, manipular o DOM para realizar o que você deseja (mas é possível manipular o DOM para fazer isso, mas você perde algumas funcionalidades interessantes do Angular 2). Aconselho que você dê uma lida nesse tópico na documentação do Angular 2 (scotch.io/tutorials/…). Neste link você encontrará o que deseja. Bom aprendizado. 3/02/2017 às 18:40
  • Realmente era isso. Obrigado 31/10/2017 às 13:49
  • Você pode fazer o botão já existente no HTML e utilizar a diretiva *ngIf="" para mostrar ou não ele. No DOM em si ele só será criado caso o *ngIf seja verdadeiro. 20/06/2018 às 16:37

1 Resposta 1

1

Segundo o Style guide do angular2 deve se evitar usar o ElementRef pois pode causar vulnerabilidade no sua aplicação pois desta forma faz acesso direto ao DOM sendo assim voce pode sofrer ataques de XXS. Caso precise alterar o DOM voce pode usar o renderer , ele faz parte do pacote do angular/core e tem varios metodos que alteram o DOM de forma segura. Você pode fazer seu codigo como no exemplo a baixo.

Dentro do seuComponent.component.ts você coloca este codigo:

private mostrar:boolean=false;
    clicou(mostrar) {
      console.log(mostrar)
       this.mostrar= !this.mostrar;

        }

E no HTML você pode usar desta forma:

<button  (click)='clicou(mostrar)'> <span>ativa/desativa</span></button>
<button *ngIf="mostrar">
<span>Ativado</span>  
</button>
<button *ngIf="!mostrar">
<span>Desativado</span>
</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .