juanjotorres90 / ngx-material-intl-tel-input

Introducing an Angular library designed to streamline the input and validation of international telephone numbers.

Hi there 👋

I'm Juanjo and I'm a Front-End Developer based in Barcelona, Spain.

ngx-material-intl-tel-input's Issues

HI can we remove phone icon

HI can we remove phone icon
<ngx-material-intl-tel-input
[preferredCountries]="['in', 'us', 'nz']"
[enablePlaceholder]="true"
[enableSearch]="true"
cssClass="country-selector"
(countryChanged)="changeCountry($event)"
[fieldControl]="phoneControl"
[initialValue]="''"
[textLabels]="textLabels"
>

NgxMaterialIntlTelInputComponent

how to use formControlName so that we can get value of phone no

this.addOrgGroupForm = this.fb.group({
id: [0],
email: ['', [Validators.required]],
phone: new FormControl(''),
});

submitForm() {
  console.log(this.addOrgGroupForm.value);
 }
 <form class="register-form m-4" [formGroup]="addOrgGroupForm" (ngSubmit)="submitForm()">
  <div class="row"> 
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
            <mat-form-field class="example-full-width mb-3" appearance="outline">
              <mat-label> Name</mat-label>
              <input matInput formControlName="name" required>
              @if (addOrgGroupForm.get('name')?.hasError('required')|| addOrgGroupForm.get('name')?.touched) {
                <mat-error >
                  {{displayErrMessage.required}}
                </mat-error>
                }
            </mat-form-field>
          </div>
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
           <ngx-material-intl-tel-input   > </ngx-material-intl-tel-input>
                  </div>
  </div>
 </form>

ng-valid when form control is invalid

Using angular 18 and the latest version of this library, it happens that the formControl associated to the ngx-material-intl-tel-input component is invalid, but the ng-valid class is shown.

Component ID generation collision

I get the following warning message, while retaining full functionality of the component:

NG0912: Component ID generation collision detected. Components '_MatFormField' and '_MatFormField2' with selector 'mat-form-field' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.dev/errors/NG0912

Environment:
Angular CLI: 18.0.4
Node: 20.14.0
Package Manager: npm 10.7.0
OS: darwin x64
@angular-devkit/architect 0.1800.4
@angular-devkit/build-angular 18.0.4
@angular-devkit/core 18.0.4
@angular-devkit/schematics 18.0.4
@angular/cdk 17.3.10
@angular/cli 18.0.4
@angular/fire 18.0.1
@angular/material 17.3.10
@angular/ssr 18.0.4
@schematics/angular 18.0.4
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.4