0
My input > client.html
<div class="form-group col-lg-2">
<label for="tipo">Tipo Pessoa:</label>
<select name="tipo" class="form-control form-control-sm" (change)="aoAlterarTipoPessoa($event.target.value)"
[(ngModel)]="cliente.tipo" id="tipo">
<option value="1">FÍSICA</option>
<option value="2">JURÍDICA</option>
</select>
</div>
<div class="form-group col-lg-2">
<label for="cpf"> {{ cpfLabel }} </label>
<input name="cpf" class="form-control form-control-sm" id="cpf" [mask]="cpfMask" [(ngModel)]="cliente.cpf">
<span *ngIf="send && !valid && cliente.tipo == 1" class="text-danger">CPF Inválido</span>
<span *ngIf="send && !valid && cliente.tipo == 2" class="text-danger">CNPJ Inválido</span>
</div>
My job > customer.ts
aoAlterarTipoPessoa(event){
if(event == 1){
this.tipoPessoa = true;
this.cpfLabel = 'CPF:';
this.rgLabel = 'RG:';
this.nomeLabel = 'Nome:';
this.apelidoLabel = 'Apelido:';
this.cpfMask = '000.000.000-00';
this.send = false;
this.valid = null;
}else{
this.tipoPessoa = false;
this.cpfLabel = 'CNPJ:';
this.rgLabel = 'IE:';
this.nomeLabel = 'Razão Social:';
this.apelidoLabel = 'Fantasia:';
this.cpfMask = "00.000.000/0000-00";
this.send = false;
this.valid = null;
}
}
ngOnInit method > client.ts
ngOnInit() {
let codigo = this.route.snapshot.params['id']; **Aqui pego o codigo passado na url**
if(codigo){
this.httpClient.get(this.url.concat(codigo)) **se existir realizo a busca do cliente**
.pipe(
map((cliente: any)=>{
this.aoAlterarTipoPessoa(cliente.tipo); ** Aqui chamo a função passando o tipo **
return cliente;
})
).subscribe(
response => this.cliente = response
);
}else{
this.aoAlterarTipoPessoa(1);
}
}
The error occurs that when editing a client, the Cpf/cnpj field continues to work the dynamic mask, but the value in the edition comes blank!
I was conducting some tests and commenting on the lines this.cpfMask = '000.000.000-00';
and this.cpfMask = "00.000.000/0000-00";
of function aoAlterarTipoPessoa()
, values are returned normally, but lose the mask function!
Remembering that when I type the CPF/CNPJ and make the change manually by the selector, the fields do not disappear and the mask keeps working, only comes the empty field of the CPF/CNPJ in the edition!
checks if the value is coming as string or number
– Eduardo Vargas
Cpf value comes as string!
– Erikles Bonfim Ribeiro
I solved it a little differently, but I solved it! I am no longer performing the mask dynamically, but using two inputs and using *ngIf to hide or display according to the selected type!
<input *ngIf="cliente.tipo == 1" name="cpf" class="form-control form-control-sm" mask="000.000.000-00" [(ngModel)]="cliente.cpf">
 <input *ngIf="cliente.tipo == 2" name="cpf" class="form-control form-control-sm" mask="00.000.000/0000-00" [(ngModel)]="cliente.cpf">
– Erikles Bonfim Ribeiro