从国家/地区下拉菜单中的国家/地区电话代码自动选择级联

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