0

Estou tendo uma imensa dificuldade de aplicar Javascript no meu projeto Angular, eu acertei na configuração para conectar o javascript no projeto, mas vamos lá...

Esse é o arquivo Javascript;

var Brewer = Brewer || {};

Brewer.MascaraCpfCnpj = (function() {

    function MascaraCpfCnpj() {
        this.radioTipoPessoa = $('.js-radio-tipo-pessoa');

    }

    MascaraCpfCnpj.prototype.iniciar = function() {
        this.radioTipoPessoa.on('change', onTipoPessoaAlterado.bind(this));
    }

    function onTipoPessoaAlterado(evento) {
        console.log('evento', evento);
    }

    return MascaraCpfCnpj;

}());

$(function() {
    var mascaraCpfCnpj = new Brewer.MascaraCpfCnpj();
    mascaraCpfCnpj.iniciar();
});

E esse é o trecho do arquivo Javascript que foi aplicado o evento;

  <div class="ui-g-12 ui-lg-3 ui-md-6 ui-fluid">
        <label for="id_FISICA">Tipo de Pessoa Física</label>
            <div class="radio">
                <p-radioButton class="js-radio-tipo-pessoa" name="group1" value="Física" id="id_FISICA" [(ngModel)]="tipo" inputId="tipo"></p-radioButton>
            </div>
      </div>
      <div class="ui-g-12 ui-lg-3 ui-md-6 ui-fluid">
        <label for="id_JURIDICA">Tipo de Pessoa Júridica</label>
            <div class="radio">
              <p-radioButton class="js-radio-tipo-pessoa" name="group1" value="Juridica" id="id_JURIDICA" [(ngModel)]="tipo" inputId="tipo"></p-radioButton>
            </div>
      </div>

Era para aparecer alguma coisa no console do navegador ao clicar no radioButton, mas não aparece absolutamente nada, nada mesmo.

Estou aberto a sugestões

2
  • Porque você está utilizando o jQuery e eventos nativos do Javascript ? Commented 24/01/2018 às 21:17
  • porque funciona.
    – user10264
    Commented 25/01/2018 às 9:04

1 Resposta 1

1

Eu não vejo muito sentido em usar o jQuery para fazer isso sendo que o própio Angular suporta isso nativamente.

Utilizando os eventos nativos, você pode construir um form e fazer um subscribe no valor dele da seguinte maneira:

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 5';
  myForm: FormGroup;
  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      identifier: ['']
    })
  }

  ngOnInit(){
    this.myForm.controls.identifier.valueChanges.subscribe(
      value => {
        console.log(value);
      }
    )
  }
}

app.component.html

<form [formGroup]="myForm">
  <input formControlName="identifier"> 
</form>

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