CODEWITHSUNDEEP
javascriptangularangular-materialangular11ngx-international-phone-number
Nasi
Nasi

Reputation: 13

ngx-mat-intl-tel-input - Angular 11 support

I'm using Angular 11.2.1 and try to use a ngx - mat-Intl-tel-input. When I am installing the package cli shows it has peer dependencies are set to 9.0.0. And If I try to implement with angular 11 project the ngx-mat-tel-input is hidden in UI. But when I click on those hidden element I have dropdown menu of country..

Has this package been compatible with angular 11.2.1?

[

import {
  Component
} from "@angular/core";
import {
  FormControl,
  Validators,
  FormGroup,
  FormBuilder
} from "@angular/forms";


@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {

  phoneForm = new FormGroup({
    phone: new FormControl(undefined, [Validators.required])
  });

  submitPhone() {

  }
  
}
<form #f="ngForm" [formGroup]="phoneForm">
  <ngx-mat-intl-tel-input [preferredCountries]="['us', 'gb']" [onlyCountries]="['us', 'gb', 'es']"
    [enablePlaceholder]="true" name="phone" formControlName="phone" #phone></ngx-mat-intl-tel-input>
  <mat-hint>e.g. {{phone.selectedCountry.placeHolder}}</mat-hint>
  <mat-error *ngIf="f.form.controls['phone']?.errors?.required">Required Field</mat-error>
  <mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber">Invalid Number</mat-error>
</form>

]1

Upvotes: 1

Views: 1610

Answers (0)

Related Questions