Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

538
Visualizações
Input 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>

enter image description here

enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda