CODEWITHSUNDEEP
angularintl-tel-input
Dheeraj Kumar
Dheeraj Kumar

Reputation: 4175

How do I set initial value for ngx-intl-tel-input

I am using ngx-intl-tel-input for phone number validation in my Angular project.

<form #f="ngForm" [formGroup]="phoneForm">
<ngx-intl-tel-input 
[cssClass]="'custom'" 
[preferredCountries]="['us', 'gb']" 
[enablePlaceholder]="true"
[enableAutoCountrySelect]="true"
[value]="'+91 8888888888'"
name="phone" 
formControlName="phone"></ngx-intl-tel-input>

I need to set value for the field which is coming from server.

I have used [value] attribute, but it doesn't seem to be working.

Upvotes: 6

Views: 10451

Answers (2)

sbh
sbh

Reputation: 91

In ngAfterViewInit, patch the value of phone with country code to the form control and detect changes.

ngAfterViewInit(){
  this.phoneForm.controls.phone.setValue('+919898989898');
  this.cd.detectChanges();
}

Upvotes: 6

Deivid Mladenov
Deivid Mladenov

Reputation: 11

When you are using form control the easiest way is to set the initial value of the control.

For ngx-intl-tel-input is important your phone number to contains country code.

 this.yourFormGroup= this.formBuilder.group({
          phone: ['+918888888888', [Validators.required]],
        });

Upvotes: 1

Related Questions