PrimeNg ui-float-label not floating after reactive form patchValue()

user_1030134 0
Viewed 1096

I've reactive form for create and edit actions. For edit I just patchValue(data) on form, works like a charm, but floating label from PrimeNg InputText component don't notice that there was value filled. When I click on one of the inputs and then blur it, then every inputs are updating the view and all labels are on top.

enter image description here enter image description here

I've tried change detection (view component has it set to OnPush), markAsDirty(), markAllAsTouched() even but labels are still over the input values. No idea how to trigger smth like physical blur on one of the controls (don't want to trigger it in the code on @ViewChild() as it looks as wrong solution for me.

Any ideas how to fix this?

angular-reactive-forms primeng angular
2 Answers

As a workaround, you can detect changes inside setTimeout after your form is created:

setTimeout(() => {
  this.cdr.markForCheck();
});

It seems that we need to listen for some event to run detection after a form with floating labels is ready, but can't find anything proper.

user_9270300

Set "p-filled" class when Input field has value

<input type="text" id="control_name" pInputText formControlName="control_name"
 [ngClass]="{'p-filled': ( formGroup_name.get(control_name)?.value !== '' )}"
>
<label for="control_name">input label</label>
user_102535520
Related