0
536
ViewsInput Password PrimeNG only works after clicking on the input
I have the following problem when using ngprime, when the page loads the input is buggy. If I click on the input it is correct, according to the second photo. Can you help me with this? I installed prime flex, prime ng. I imported the styles in angular.json
formulario: FormGroup = this.fb.group({
email: [null, [Validators.email, Validators.required]],
password: [null, Validators.required]
}); <form [formGroup]="formulario" class="p-fluid mt-5">
<fieldset class="field">
<label for="password" class="block">Email</label>
<span class="p-input-icon-left my-2">
<i class="pi pi-user"></i>
<input id="email" formControlName="email" type="email" pInputText placeholder="Email">
</span>
</fieldset>
<fieldset class="field mt-2">
<label for="password" class="block">Password</label>
<p-password id="password" formControlName="password" [toggleMask]="true" promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte">
</p-password>
</fieldset>
</form>
·
Juan Pablo Isaza
1 answers
Answer question0
It appears to be a known bug in the component. You can see the thread on GitHub here.
There's a workaround until they fix it. Add the following attribute to the p-password element:
styleClass="p-password p-component p-inputwrapper p-input-icon-right"
Like this:
<p-password id="password"
[toggleMask]="true"
promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte"
styleClass="p-password p-component p-inputwrapper p-input-icon-right">
</p-password>
·
Juan Pablo Isaza
Report
Answer question