I can’t see more than one p-dropdown primeng on the same page

Question

Have a page that has 4 p-dropdowns primeng but they don’t work, only one opens. Separately all work, but when only 1 on the page.

<div class="container">
  <form #f="ngForm" autocomplete="off" (ngSubmit)="salvar(f)"  >
    <div class="ui-g">
      <div class="ui-g-12">
        <h1>{{ editando ? 'Edição de' : 'Novo' }} Cliente</h1>
      </div>

      <div class="ui-g-3 ui-md-1 ui-fluid">
      <label>Codigo</label>
      <input pInputText type="text" name="cliente.codigo"
       [(ngModel)]="cliente.codigo"
        #codigo="ngModel">
    </div>

    <div class="ui-g-6 ui-md-3 ui-fluid">
        <label>Tipo de Documento</label>

        <p-dropdown placeholder="Selecione..." [autoWidth]="false"
          [filter]="false"
          [options]="tiposDocumentos"
          [(ngModel)]="cliente.tipoDocumento" name="tipoDocumento"
          (onChange)="carregarTipoDocumento()"
          #tipoDocumento="ngModel" required></p-dropdown>


        <app-message [control]="cliente.tipoDocumento" error="required"
          text="Informe o tipo de documento"></app-message>
    </div>



    <div class="ui-g-6 ui-md-3 ui-fluid">
        <label>Numero Documento</label>
        <input pInputText type="text" name="cliente.nrDocumento"
        [(ngModel)]="cliente.nrDocumento"
        #nrDocumento="ngModel" >

    </div>
    <div class="ui-g-12 ui-md-9 ui-fluid">
      <label>Nome / Razão Social</label>
      <input pInputText type="text" name="cliente.nomeRazaoSocial"
      [(ngModel)]="cliente.nomeRazaoSocial"
      #nomeRazaoSocial="ngModel" >
    </div>


    <div class="ui-g-8 ui-md-4 ui-fluid">
      <label>ubigeo</label>
      <input pInputText type="text" name="cliente.endereco.ubigeo"
      [(ngModel)]="cliente.endereco.ubigeo"
      #ubigeo="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-3 ui-fluid">
      <label>Tipo de Via</label>
      <input pInputText type="text" name="cliente.endereco.tipoVia"
      [(ngModel)]="cliente.endereco.tipoVia"
      #tipoVia="ngModel" >
    </div>
    <div class="ui-g-12 ui-md-6 ui-fluid">
      <label>Nome da Via</label>
      <input pInputText type="text" name="cliente.endereco.nomeVia"
      [(ngModel)]="cliente.endereco.nomeVia"
      #nomeVia="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-3 ui-fluid">
      <label>Numero</label>
      <input pInputText type="text" name="cliente.endereco.numero"
      [(ngModel)]="cliente.endereco.numero"
      #numero="ngModel" >
    </div>

    <div class="ui-g-6 ui-md-4 ui-fluid">
      <label>Codigo da Zona</label>
      <input pInputText type="text" name="cliente.endereco.codigoZona"
      [(ngModel)]="cliente.endereco.codigoZona"
      #codigoZona="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-3 ui-fluid">
      <label>Tipo da Zona</label>
      <input pInputText type="text" name="cliente.endereco.tipoZona"
      [(ngModel)]="cliente.endereco.tipoZona"
      #tipoZona="ngModel" >
    </div>


    <div class="ui-g-6 ui-md-3 ui-fluid">
      <label>Interior</label>
      <input pInputText type="text" name="cliente.endereco.interior"
      [(ngModel)]="cliente.endereco.interior"
      #nome="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-4 ui-fluid">
      <label>Lote</label>
      <input pInputText type="text" name="cliente.endereco.lote"
      [(ngModel)]="cliente.endereco.lote"
      #lote="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-4 ui-fluid">
      <label>Manzana</label>
      <input pInputText type="text" name="cliente.endereco.manzana"
      [(ngModel)]="cliente.endereco.manzana"
      #manzana="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-4 ui-fluid">
      <label>Kilometro</label>
      <input pInputText type="text" name="cliente.endereco.kilometro"
      [(ngModel)]="cliente.endereco.kilometro"
      #kilometro="ngModel" >
    </div>

    <div class="ui-g-12 ui-md-6 ui-fluid">
      <label>Departamento</label>

      <p-dropdown placeholder="Selecione..." optionLabel="departamento" [autoWidth]="false"
        [filter]="true"
        [options]="departamentos"
        [(ngModel)]="departamentoSelecionado" name="departamentoSelecionado"
        (onChange)="carregarProvincia()"
        #departamento="ngModel" required></p-dropdown>

      <app-message [control]="departamento" error="required"
        text="Informe o departamento"></app-message>
    </div>


    <div class="ui-g-12 ui-md-6 ui-fluid">
      <label>Provincia</label>

      <p-dropdown placeholder="Selecione..." [autoWidth]="false"
        [filter]="true"
        [options]="provincias"
        [(ngModel)]="provinciaSelecionada" name="provinciaSelecionada"
        (onChange)="carregarDistrito()"
        #provincia="ngModel" required
        [disabled]="!departamentoSelecionado"></p-dropdown>

        <app-message [control]="provincia" error="required"
        text="Informe a provincia"></app-message>

    </div>

    <div class="ui-g-12 ui-md-6 ui-fluid">
      <label>Distrito</label>

      <p-dropdown  placeholder="Selecione..." [autoWidth]="false"
        [filter]="true"
        [options]="distritos"
        [(ngModel)]="cliente.distrito" name="distrito"
        (onChange)="carregarDistrito()"
        #distrito="ngModel" required
        [disabled]="!provinciaSelecionada"></p-dropdown>

        <app-message [control]="distrito" error="required"
        text="Informe o distrito"></app-message>
    </div>

    <div class="ui-g-12 ui-md-9 ui-fluid">
      <label>e-mail (Principal)</label>
      <input pInputText type="text" name="cliente.emailPrincipal"
      [(ngModel)]="cliente.emailPrincipal"
      #emailPrincipal="ngModel" >
    </div>
    <div class="ui-g-12 ui-md-9 ui-fluid">
      <label>e-mail (Opcional)</label>
      <input pInputText type="text" name="cliente.emailOpcional"
      [(ngModel)]="cliente.emailOpcional"
      #emailOpcional="ngModel" >
    </div>
    <div class="ui-g-12 ui-md-9 ui-fluid">
      <label>e-mail (Opcional 2)</label>
      <input pInputText type="text" name="cliente.emailOpcional2"
      [(ngModel)]="cliente.emailOpcional2"
      #emailOpcional2="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-4 ui-fluid">
      <label>Telefone Celular</label>
      <input pInputText type="text" name="cliente.telefoneCelular"
      [(ngModel)]="cliente.telefoneCelular"
      #telefoneCelular="ngModel" >
    </div>
    <div class="ui-g-6 ui-md-4 ui-fluid">
      <label>Telefone Fixo</label>
      <input pInputText type="text" name="cliente.telefoneFixo"
      [(ngModel)]="cliente.telefoneFixo"
      #telefoneFixo="ngModel" >
    </div>
    <div class="ui-g-12 ui-md-9 ui-fluid">
      <label>Detalhes Adicionais</label>
      <textarea pInputTextarea rows="3" name="cliente.detalhesAdicionais"
      [(ngModel)]="cliente.detalhesAdicionais"
      #detalhesAdicionais="ngModel" ></textarea>
    </div>
    <div class="ui-g-12">
      <button pButton type="submit" label="Salvar" [disabled]="f.invalid"></button>
      <button pButton type="button" label="Novo" class="ui-button-info"
        (click)="novo(f)"></button>
      <a routerLink="/clientes">Voltar para a pesquisa</a>
    </div>
  </div>
</form>
</div>

Answer 1

I discovered the problem concerning this issue that I myself raised. What happens is that there was an error in the app-message. By option I removed the tag and treated it differently then all other components worked.