Primeng: p-inputMask with angular 8 doesn't set value

Created on 23 Jul 2019 · 11Comments · Source: primefaces/primeng

in ngOnInit

this.formGroup.setValue(value);

doesn't set p-inputMask value with angular 8 and following p-inputMask code;

@ViewChild('input', { static: false }) inputViewChild: ElementRef;

changing to

@ViewChild('input', { static: true }) inputViewChild: ElementRef;

fix the problem,
also

 setTimeout(() => {
   this.formGroup.setValue(value);
}, 0);

works.

defect

Source

truadeveloper

Most helpful comment

Commit 35ba346 fixed my ExpressionChangedAfterItHasBeenCheckedError issue too.

kt215 on 4 Sep 2019

👍2

All 11 comments

I have the same problem.

this.formulario.controls['ini'].setValue(moment(Date.now()).format('L'));

they set but doesnt show...

any solution?

adelcioml on 30 Jul 2019

I'm having the same problem.

sergiogoncalves on 8 Aug 2019

Probably a separate issue, but: I upgraded to Angular 8 and I use p-inputMask with ngrx-forms. Values are set but I see lots of ExpressionChangedAfterItHasBeenCheckedError in the console for the p-inputMask control. These errors did not occur with Angular 7.

kt215 on 9 Aug 2019

Same problem here, I had to do the hack method below:

setTimeout(() => {
        this.formGroup.patchValue({
          descricao: rs.data.prestadorPorId.descricao,
          cnpj_cpf: rs.data.prestadorPorId.cnpj_cpf,
          tipo: rs.data.prestadorPorId.tipo,
          fone: rs.data.prestadorPorId.fone,
          grupoProcedimento: rs.data.prestadorPorId.grupoProcedimentos.map((el) => ({ descricao: el.descricao, value: el.id })),
          prestadorProfissional: rs.data.prestadorPorId.profissionaisExecutantes.map((el) => ({ nome: el.nome, crm: el.codigo_conselho, value: el.id }))
        });
      }, 0);

Angular: 8.0.0
Primeng: 8.0.0

leonetosoft on 18 Aug 2019

Is ivy enabled?

cagataycivici on 23 Aug 2019

ivy not enabled

truadeveloper on 23 Aug 2019

This issue is also occurring for us.

I made a StackBlitz example of the issue. If you comment out the setTimeout(), the value doesn't display.
https://stackblitz.com/edit/github-rz93cx

The hack for us has been to set the control's value to the value that's already in the control, like this:

setTimeout(() => {
  const maskedInputControl = this.parentForm.get('maskedInput') as FormControl;
  maskedInputControl.setValue(maskedInputControl.value);
});