Tenho um component onde preciso que o input possua a mascara para cpf ou cnpj de acordo com a entrada de dados. Estou usando o ng-mask, porém minha validação para a mascara esta funcionando apenas para a primeira validação. Segue abaixo o código. module.ts
import { NgxMaskModule } from 'ngx-mask';
@NgModule({
declarations: [ .... ],
imports: [
//outros imports
NgxMaskModule.forRoot(),
],
No meu component.ts eu estou utilizando dessa forma o metodo.
@Component({
selector: 'app-dados-bancarios-professor',
templateUrl: './dados-bancarios.component.html',
styleUrls: ['./dados-bancarios.component.scss']
})
//regras de negócio do component
mask:string;
cpfcnpjmask() {
const value = this.dadosBancariosForm.get('cpf_cnpj').value;
console.log(value, value.length,this.dadosBancariosForm)
if(value.length <= 14) {
this.mask = '00.000.000/0000-00'
}
else {
this.mask = '00.000.0000-00'
}
}
E por eu uso a mascara da seguinte forma no meu component.html
<label class="control-label">CPF/CNPJ<span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" formControlName="cpf_cnpj" [mask]="mask" (keyup)="cpfcnpjmask($event)">
Acontece que ele faz o primeiro bind, mas nao chega a executar a segunda mascara de acordo com o que é inserido pelo usuário. Alguém saberia como resolver esse impasse?