0

I have a button on my child component that should send information to its parent component but this button is not sending this information. I'm probably missing something but I still didn't notice it.

Here's the code from the button inside my child component (there are two buttons: selectPessoaJuridica and selectPessoaFisica:

import { Component, Input, Output, EventEmitter} from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {FinalizaDisputaService} from '../services/finaliza-disputa.service'; import {FinalizaDisputaComponent} from './finaliza-disputa.component' @Component({ moduleId: module.id, selector: 'titular', templateUrl: 'dados-titular.component.html' }) export class TitularComponent { // we will pass in address from App component @Input('group') public titularForm: FormGroup; @Input() submitted:any; @Input() indexNumber:any; @Output() modelChanged = new EventEmitter<boolean>(); public isJuridica = false; classe = { pessoa_fisica: 'selected', pessoa_juridica: '' }; constructor(private _fb: FormBuilder, private finalizaAcordo:FinalizaDisputaService) {} selectPessoaFisica(e:boolean){ e = false; this.classe.pessoa_fisica = "selected"; this.isJuridica = false; this.classe.pessoa_juridica = ""; this.modelChanged.emit(e) } selectPessoaJuridica(e:boolean){ e = true; this.classe.pessoa_fisica = ""; this.classe.pessoa_juridica = "selected"; this.isJuridica = true; console.log("ativou", e) this.modelChanged.emit(e); } }

So, what this should do is notify the parent that e is now false.

This is the html from parent component:

<titular (modelChanged)="recebeValidators($event)" [indexNumber]="indice" [submitted]="submitted" [group]="formDadosBancarios.controls.dados_titular.controls[i]"></titular>

And this is the code from parent component where I should receive the value from e (recebeValidators ):

import { Component, OnChanges, OnInit, Input } from '@angular/core'; import { Http } from '@angular/http'; import { FormBuilder, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule, AbstractControl, ValidatorFn } from '@angular/forms'; import { FinalizaDisputaService } from '../services/finaliza-disputa.service'; import {DisputaService} from '../../disputas/services/disputas.service'; import { dadosAcordo } from '../model/dados-acordo.interface'; import { TitularComponent } from './dados-titular.component'; import {Routes, RouterModule, Router, ActivatedRoute} from '@angular/router'; @Component({ moduleId: module.id, selector: 'detalhes', templateUrl: `finaliza-disputa.component.html`, providers: [FinalizaDisputaService] }) export class FinalizaDisputaComponent implements OnInit { public dados: dadosAcordo; disputa:any; public formDadosBancarios: FormGroup; public submitted: boolean; public events: any[] = []; public servError: any; public indice = 0; public loading = false; soma = 0; public servSuccess: any; @Input() e:boolean; cpf_REGEXP = /^\d+$/; constructor(private _fb: FormBuilder, private service:DisputaService, private finalizaAcordo: FinalizaDisputaService, private route:ActivatedRoute, private router:Router) {} ngOnInit() { this.route.params.subscribe(params => { let id = params['id']; this.service .buscaPorId(id) .subscribe(disputa => { this.disputa = disputa; console.log(disputa.campanha); console.log(this.disputa.propostas_realizadas); }, erro => console.log(erro)); }) this.formDadosBancarios = this._fb.group({ id: [''], termos_condicoes: [false, Validators.requiredTrue], dados_titular: this._fb.array([ this.initTitular() ]) }) } /** * initTitular- Inicializa o grupo de formulário dinâmico e suas validações * @returns '' */ initTitular() { return this._fb.group({ titular: ['', [<any>Validators.required, <any>Validators.minLength(3)]], cnpj: [''], cpf: ['', <any>Validators.required], data_nasc: ['', <any>Validators.required], agencia: ['', <any>Validators.required], banco: ['', <any>Validators.required], conta: ['', <any>Validators.required], tipo: ['', <any>Validators.required], pessoa_juridica: [false], valor_deposito: [''] }) } // this is where I receive e recebeValidators(model: dadosAcordo, e: any) { console.log("test", e); const array = <FormArray>this.formDadosBancarios.get('dados_titular'); const cpf = array.at(this.indice).get("cpf"); const cnpj = array.at(this.indice).get('cnpj'); const data_nasc = array.at(this.indice).get('data_nasc'); const cpfCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'cpf']); const pessoa_juridicaCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'pessoa_juridica']) const cnpjCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'cnpj']); const data_nascCtrl: AbstractControl = this.formDadosBancarios.get(['dados_titular', this.indice, 'data_nasc']); const reqValidators: ValidatorFn[] = [Validators.required, Validators.pattern(this.cpf_REGEXP)]; if (e == true) { data_nascCtrl.clearValidators(); cpfCtrl.clearValidators(); cnpjCtrl.setValidators(reqValidators); }else{ cnpjCtrl.clearValidators(); cpfCtrl.setValidators(reqValidators); data_nascCtrl.setValidators(reqValidators); } data_nascCtrl.updateValueAndValidity(); cpfCtrl.updateValueAndValidity(); cnpjCtrl.updateValueAndValidity(); }

But instead of printing false it is printing undefined. Can someone help me? thanks

enter image description here

Improve this question

2 Answers 2

Reset to default
2

It seems you're shadowing a class attribute with the function parameter "e" in the "recebeValidators" function.

The code:

console.log("test", this.e);

should actually be:

console.log("test", e);

To rule out the possibility of a possible casting error in the EventEmitter, try not reusing the parameter function. Example:

selectPessoaFisica(e:any) { e = false; this.modelChanged.emit(e) }

could be rewritten as:

selectPessoaFisica() { this.modelChanged.emit(false); }

There's also an extra parameter in the receiving function:

This:

recebeValidators(model: dadosAcordo, e: boolean) {

Should be:

recebeValidators(e: boolean) {
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Make sure you check which variable you're printing on the console. Everything might be working perfectly, but you might be using "this.e" (a class attribute) instead of "e" (the function argument).
Yes, I was making some tests and forgot to remove the this but even removed it stills printing undefined :(. Thanks anyway
It should be working. I just tested it in my machine and it worked. Maybe if you paste your current source code we could spot the mistake you're making. It's probably some small typo or casting issue.
ok, I'll edit the question and paste the whole code from the child component
I've updated the question, see if you can help please
|
0

You should type casting it 

@Output() modelChanged = new EventEmitter<boolean>();

Also you are referring a wrong variable and you should be passing only one argument as it is in the parent component and remove the this keyword 

recebeValidators(e: boolean) { console.log("test", e); }
Improve this answer

5 Comments

Oh yes, I was doing some tests and forgot to remove the this. Anyway I cast it like you said but I am still getting undefined :(
where do you get the undefined on emit or console update the post with screenshot
how can I update the child component as you didnt mention in your post. update it I will fix it for you
Sorry, I didn´t get you, you want me to put the html from the child component?
Sent you a message

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.