从国家下拉列表中级联的国家电话代码自动选择

Question

我有一个国家/地区下拉列表，我希望在其更改事件中加载相关的电话代码下拉列表。

  <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>

默认情况下我已将其设置为我们United State 但我希望它是从国家下拉更改事件中选择的

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

这是我的预期输出

Answer 1

我认为您可以使用 setCountry() 方法，但我不确定。因此，当您使用引用变量“validatePhone”时，您可以在 .html 中使用 validatePhone.setCountry($event)

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