Ngx-mask: Error on MaskService.applyMask

[ricardorueda]

I'm trying to use a mask on a reactive form.
There is an error saying that you can not apply the mask because you did not find the formControlName.
Is there any solution to fix this problem?
My reactive form is loaded with an observable.
Here are the code snippets:

My html:

<div class="col-md-3 m--margin-bottom-10-mobile"> <mat-form-field class="mat-form-field-fluid" appearance="outline" floatLabel="always"> <mat-label>CNPJ</mat-label> <input matInput type='text' mask="00.000.000/0000-00" name="CNPJ" placeholder="CNPJ" formControlName="CNPJ"> <mat-error *ngIf="(submitted || f.CNPJ.touched) && f.CNPJ.errors"> <div *ngIf="f.CNPJ.invalid">{{getErrorMessageCNPJ()}}</div> </mat-error> </mat-form-field> </div>
My subscribe:

this.empresaFormSub = this.empresaFormService.empresaForm$ .subscribe(empresa => { this.empresaForm = empresa; this.contatos = this.empresaForm.get('Contatos') as FormArray; this.redesCredenciadas = this.empresaForm.get('RedesCredenciada') as FormArray; })

My component:

this.empresaFormSub = this.empresaFormService.empresaForm$ .subscribe(empresa => { this.empresaForm = empresa; this.contatos = this.empresaForm.get('Contatos') as FormArray; this.redesCredenciadas = this.empresaForm.get('RedesCredenciada') as FormArray; })

Error:

ERROR Error: Uncaught (in promise): Error: There is no FormControl instance attached to form control element with name: 'CNPJ'
Error: There is no FormControl instance attached to form control element with name: 'CNPJ'
at _throwError (:4200/vendor.js:75017)
at _noControlError (:4200/vendor.js:75004)
at MaskService.onChange (:4200/vendor.js:74948)
at MaskService.push../node_modules/ngx-mask/fesm5/ngx-mask.js.MaskService.applyMask (:4200/vendor.js:187569)
at MaskDirective. (:4200/vendor.js:187996)
at step (:4200/vendor.js:212362)
at Object.next (:4200/vendor.js:212343)
at :4200/vendor.js:212336
at new ZoneAwarePromise (:4200/polyfills.js:7936)
at __awaiter (:4200/vendor.js:212332)
at resolvePromise (:4200/polyfills.js:7859)
at new ZoneAwarePromise (:4200/polyfills.js:7939)
at __awaiter (:4200/vendor.js:212332)
at MaskDirective.push../node_modules/ngx-mask/fesm5/ngx-mask.js.MaskDirective.writeValue (:4200/vendor.js:187983)
at setUpControl (:4200/vendor.js:74930)
at :4200/vendor.js:77819
at Array.forEach ()
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective._updateDomValue (:4200/vendor.js:77814)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges (:4200/vendor.js:77753)
at checkAndUpdateDirectiveInline (:4200/vendor.js:63655)

[PalanikumarNet]

I am also having the same issue, Any help would be appreciated

[sasos90]

I have some problem when I want to set the value for form. Then I get this similar "There is no FormControl..." error. If I put a timeout there even for 0 milliseconds, just to wait for the next tick, the setting of the value is working. But thats ugly :/

[ricardorueda]

I resolved changing my reactive forms configuration in component.
This solution has been found in a topic of Stackoverflow... I dont remember the link now...

[formControl]="form.get('CNPJ')"

[sasos90]

This really works! Thanks man!

[sekhar-sails]

Really hepls a lot