When the country dropdown is changed, I want the corresponding phone code dropdown to be dynamically 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>
I have initially set it to 'US' by default in the ng2TelInputOptions, but I intend for it to change based on the selected country in the dropdown.
[ng2TelInputOptions]="{initialCountry: 'us', preferredCountries: ['us', 'us']}" required
The desired output can be viewed here.