Country Phone Code Auto Selection Cascading From Country Dropdown

Question

I have a country dropdown, I want on its change event relevant phone code dropdown be loaded.

  <div class="row">
    <div class="col-sm-8 col-md-7 col-lg-6 col-xl-5 pr-0">
      <div class="form-group py-2">
        <label for="country" class="font-weight-bold"><span class="text-danger">*</span>{{ 'Country' | translate }}</label>
        <select name="country" id="country" class="form-control" [(ngModel)]="collaboration.countryCode" required
                #country="ngModel">
          <option *ngFor="let countryCode of countryCodes" [value]="countryCode">{{countries[countryCode]}}</option>
        </select>
        <div class="invalid-feedback"
             [style.display]="country.hasError('required') && (country.dirty || createContactSubmitted) ? 'block' : 'none'">
          {{ 'reqFieldDesc' | translate }}
        </div>
      </div>
    </div>
    <div class="col-sm-8 col-md-7 col-lg-6 col-xl-5 pr-0">
      <div class="form-group py-2">
        <label for="validatePhone" class="font-weight-bold"><span class="text-danger">*</span>{{ 'PhoneNumber' | translate }}</label>
        <div class="input-group">
          <input type="tel" name="validatePhone" id="validatePhone" class="form-control"
                 [ngClass]="{'is-invalid': validatePhone.invalid && (validatePhone.dirty || createContactSubmitted)}"
                 [(ngModel)]="collaboration.validatePhoneNumber" ng2TelInput
                 [ng2TelInputOptions]="{initialCountry: 'us', preferredCountries: ['us', 'us']}" required
                 #validatePhone="ngModel" />
        </div>
        <div class="invalid-feedback"
             [style.display]="validatePhone.hasError('required') && (validatePhone.dirty || createContactSubmitted) ? 'block' : 'none'">
          {{ 'reqFieldDesc' | translate }}
        </div>
      </div>
    </div>
  </div>

by default I have set it to us United State But I want it to be select from country drop down change event

[ng2TelInputOptions]="{initialCountry: 'us', preferredCountries: ['us', 'us']}" required

Here is my expected output

Answer 1

I supuose that you can use the method setCountry() but I'm not sure. So as you use a reference variable "validatePhone" you can use validatePhone.setCountry($event) in your .html

<select name="country" ... [ngModel]="collaboration.countryCode" 
    (ngModelChange)="collaboration.countryCode=$event;validatePhone.setCountry($event)">
          ...
</select>
<input type="tel" ... #validatePhone="ngModel" />