The scenario I am facing involves entities that own a Pessoa, with one of them being an Administrador. To handle this, I created a component to encapsulate the Pessoa data on CRUD forms. I linked the administrador.pessoa property to my new PessoaFormComponent using the @Input() directive.
However, I encountered an issue where upon submitting the form in the AdministradorComponent, the administrador.pessoa property remains null. It seems like the updates made to the pessoa property in the PessoaFormComponent are not reflecting back in the AdministradorComponent.
Here is a snippet from administrador.component.ts:
@Component({
...
templateUrl: './administrador.component.html',
directives: [... PessoaFormComponent, ...],
...
})
export class AdministradorComponent {
@ViewChild('pessoaForm')
pessoaFormComponent: PessoaFormComponent;
}
And here is a portion of administrador.component.html:
...
<app-pessoa-form #pessoaForm [(pessoa)]="entidade.pessoa"></app-pessoa-form>
...
In the pessoa.form.component.ts file:
@Component({
...
selector: 'app-pessoa-form',
templateUrl: './pessoa.form.component.html',
...
})
export class PessoaFormComponent implements AfterViewInit {
@Input()
pessoa: Pessoa;
private _tipoPessoa: String;
ngAfterViewInit() {
this._tipoPessoa= 'FISICA';
this.reiniciarPessoa();
}
private reiniciarPessoa() {
if (this._tipoPessoa === 'JURIDICA') {
this.pessoa = new PessoaJuridica();;
} else {
this.pessoa = new PessoaFisica();;
}
}
get tipoPessoa(): String {
return this._tipoPessoa;
}
set tipoPessoa(tipoPessoa: String) {
this._tipoPessoa = tipoPessoa;
this.reiniciarPessoa();
}
}