tanansatpal / ngx-mat-intl-tel-input

MIT License
62 stars 108 forks source link

Placeholder not showing up on a16. #189

Closed vacmarek closed 8 months ago

vacmarek commented 9 months ago

After updating to angular 16 placeholder keeps missing. html code:

<section *ngIf="field && formControl" [formGroup]="ngGroup" [attr.id]="id || undefined" [attr.data-qid]="id"
  [ngClass]="{'D(n)':field.type === 'hidden'}" (ngSubmit)="onSubmit()">

  <mat-form-field>
    <ngx-mat-intl-tel-input [onlyCountries]="field?.onlyCountries || ''"
      [preferredCountries]="field?.prefCountries || ['cz','sk','de','at','pl']" [enablePlaceholder]="true"
      [placeholder]="field?.label" [name]="field?.name" [inputPlaceholder]="field?.placeholder" formControlName="phone"
      [required]="field?.required" #phone>
    </ngx-mat-intl-tel-input>
    <!-- errors -->
    <mat-error *ngIf="formControl?.touched && formControl?.errors">
      {{ getErrorMessage((formControl?.errors | iterableObject)[0]) }}
    </mat-error>
  </mat-form-field>
</section>

How it looks now: image image There is just inputPlaceholder

How it looked before (A v10): image image There was just placeholder

So with the old version, there was workinh just [placeholder], now there is working just [inputPlaceholder] Can someone help me fix this?

tanansatpal commented 8 months ago

You should use the mat-label component for the behaviour.

<section *ngIf="field && formControl" [formGroup]="ngGroup" [attr.id]="id || undefined" [attr.data-qid]="id"
  [ngClass]="{'D(n)':field.type === 'hidden'}" (ngSubmit)="onSubmit()">
      <mat-form-field>
     <mat-label>Telefon</mat-label>
    <ngx-mat-intl-tel-input [onlyCountries]="field?.onlyCountries || ''"
      [preferredCountries]="field?.prefCountries || ['cz','sk','de','at','pl']" [enablePlaceholder]="true"
      [placeholder]="field?.label" [name]="field?.name" [inputPlaceholder]="field?.placeholder" formControlName="phone"
      [required]="field?.required" #phone>
    </ngx-mat-intl-tel-input>
    <!-- errors -->
    <mat-error *ngIf="formControl?.touched && formControl?.errors">
      {{ getErrorMessage((formControl?.errors | iterableObject)[0]) }}
    </mat-error>
  </mat-form-field>
</section>