Angular使用ng-select实现省市区三级联动时默认文本与回显问题咨询

问题修复方案 #

问题根因 #

1. 默认提示未显示：没有使用ng-select官方的placeholder属性，自定义的默认ng-option和表单初始值不匹配，导致输入框无法匹配到对应选项显示。
2. 数据回显失败：三级联动的接口请求是异步执行，未按依赖顺序执行请求，表单赋值时对应级别的选项列表还未加载完成，ng-select找不到匹配id的选项自然无法回显。

第一步：修改模板HTML #

给每个ng-select配置原生placeholder属性，删除多余的自定义默认option，代码如下：

<div class="col-sm-6">
  <div class="form-group">
    <label for="country">Country <b style="color: red">*</b></label>
    <ng-select 
      formControlName="country" 
      (change)="onChangeCountry($event)" 
      [ngClass]="{ 'error_border': submitted && f.country.errors }"
      placeholder="Select Country"
    >
      <ng-option *ngFor="let country of countryInfo" [value]="country.id">{{country.name}}</ng-option>
    </ng-select>
    <div *ngIf="submitted && f.country.errors" class="text-danger">
      <div *ngIf="f.country.errors.required">Country is required</div>
    </div>
  </div>
</div>

<div class="col-sm-6">
  <div class="form-group">
    <label for="state">State <b style="color: red">*</b></label>
    <ng-select 
      formControlName="state"  
      [ngClass]="{ 'error_border': submitted && f.state.errors }" 
      (change)="onChangeState($event)"
      placeholder="Select State"
    >
      <ng-option *ngFor="let state of stateInfo" [value]="state.id">{{state.name}}</ng-option>
    </ng-select>
    <div *ngIf="submitted && f.state.errors" class="text-danger">
      <div *ngIf="f.state.errors.required">State is required</div>
    </div>
  </div>
</div>

<div class="col-sm-6">
  <div class="form-group">
    <label for="city">City <b style="color: red">*</b></label>
    <ng-select 
      formControlName="city" 
      [ngClass]="{ 'error_border': submitted && f.city.errors }"
      placeholder="Select City"
    >
      <ng-option *ngFor="let city of cityInfo" [value]="city.id">{{city.name}}</ng-option>
    </ng-select>
    <div *ngIf="submitted && f.city.errors" class="text-danger">
      <div *ngIf="f.city.errors.required">City is required</div>
    </div>
  </div>
</div>

第二步：修改TS代码 #

调整异步请求执行顺序，修正表单初始值和赋值逻辑，核心代码如下：

export class EditProfileComponent implements OnInit {

  stateInfo: any[] = [];
  countryInfo: any[] = [];
  cityInfo: any[] = [];

  dbCountryId: number | null = null;
  dbStateId: number | null = null;
  dbCityId: number | null = null;

  ngOnInit() {
    // 初始值设为null，适配required校验规则
    this.form = this.formBuilder.group({
      country: [null, Validators.required],
      state: [null, Validators.required],
      city: [null, Validators.required],
    });

    this.userService.getUserDetails(userDetails.id).subscribe(async (results) => {
      if (results['status'] === true) {
        this.dbCountryId = results.data.country_id ?? null;
        this.dbStateId = results.data.state_id ?? null;
        this.dbCityId = results.data.city_id ?? null;

        // 按依赖顺序加载三级数据，确保赋值时选项列表已存在
        // 1. 加载国家列表后赋值
        const countryRes = await this.cscService.getCountries().toPromise();
        this.countryInfo = countryRes.data;
        this.form.patchValue({ country: this.dbCountryId });

        // 2. 存在国家ID时加载对应省份列表后赋值
        if (this.dbCountryId) {
          const stateRes = await this.cscService.getStates(this.dbCountryId).toPromise();
          this.stateInfo = stateRes.data;
          this.form.patchValue({ state: this.dbStateId });
        }

        // 3. 存在省份ID时加载对应城市列表后赋值
        if (this.dbStateId) {
          const cityRes = await this.cscService.getCities(this.dbStateId).toPromise();
          this.cityInfo = cityRes.data;
          this.form.patchValue({ city: this.dbCityId });
        }
      }
    });
  }

  getCountries() {
    this.cscService.getCountries().subscribe((result) => {
      this.countryInfo = result.data;
    });
  }

  onChangeCountry(countryId: number) {
    // 切换国家时重置下级值
    this.form.patchValue({ state: null, city: null });
    this.cityInfo = [];
    if (countryId) {
      this.cscService.getStates(countryId).subscribe((result) => {
        this.stateInfo = result.data;
      });
    } else {
      this.stateInfo = [];
    }
  }

  onChangeState(stateId: number) {
    // 切换省份时重置城市值
    this.form.patchValue({ city: null });
    if (stateId) {
      this.cscService.getCities(stateId).subscribe((result) => {
        this.cityInfo = result.data;
      });
    } else {
      this.cityInfo = [];
    }
  }
}

核心修改说明 #

• 用ng-select原生placeholder实现默认提示，不需要自定义默认option，避免值不匹配问题
• 异步请求按「国家→省份→城市」的依赖顺序执行，每一级选项列表加载完成后再赋值，确保ng-select能找到对应ID的选项完成回显
• 表单初始值和切换重置值统一设为null，和required校验逻辑匹配，避免无效字符串值被提交

内容的提问来源于stack exchange，提问作者ganesh