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

Question

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.

score 6 · Answer 1 · edited May 20 '23 at 17:21

6

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();
}

edited May 20 '23 at 17:21

Dorian

7,749
4
38
57

answered Apr 15 '19 at 11:07

sbh

91
1
7

what is cd? what kind of variable is ? – qleoz12 May 31 '22 at 15:42
1

`cd.detectChanges()` really did job for me! Thanks! – Prostakov Aug 14 '22 at 13:52
1

@qleoz12 you inject `ChangeDetectorRef` in your class, like this: `constructor(private cd: ChangeDetectorRef) {}` – Prostakov Aug 14 '22 at 13:54

score 1 · Answer 2 · answered Apr 09 '21 at 08:06

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]],
        });

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

2 Answers2