Angular国家旗帜下拉组件双向联动功能故障排查

核心问题诊断 #

1. 下拉选择后UI无更新：模板中下拉组件绑定的是内部countryForm的countryControl，但TS代码里订阅的是独立的countryControl的valueChanges，两者不是同一个实例，导致下拉选择时onCountryChange方法未触发，selectedCountry未更新，UI无法同步。
2. 改模板用country后手机号匹配失效：此时下拉选中项的UI依赖模板变量country，但手机号输入时更新的是TS中的selectedCountry，模板未关联该变量，所以无法同步显示匹配的国旗。
3. @Input form与内部countryForm冲突：外部传入的form用于管理手机号输入控件，内部countryForm是多余的嵌套，导致表单控件实例混乱，没必要额外创建独立表单组。

分步修复 #

1. 修正TS代码：统一表单控件实例，优化逻辑 #

import {Component, OnInit, Input, Output, EventEmitter} from "@angular/core";
import {FormGroup, FormControl} from "@angular/forms";
import {CountryDataService} from "projects/pitxpress-admin-app/src/app/pitxpress/api-services/country/country-data.service";
import {ICountry} from "projects/pitxpress-admin-app/src/app/pitxpress/api-services/country/models/country.interface";
import {PhoneNumberUtil, PhoneNumberFormat} from "google-libphonenumber";

@Component({
    selector: "app-country-flag-dropdown",
    templateUrl: "./country-flag-dropdown.component.html",
    styleUrls: ["./country-flag-dropdown.component.scss"],
})
export class CountryFlagDropdownComponent implements OnInit {
    @Input() public form!: FormGroup;
    @Input() public controlName!: string;
    @Output() public phoneNumberChange = new EventEmitter<string>();

    public countries: ICountry[] = [];
    public selectedDialCode: string = "";
    public selectedCountry: ICountry | undefined;
    // 用单一控件绑定下拉，不再创建多余的countryForm
    public countryControl = new FormControl();

    private phoneNumberUtil = PhoneNumberUtil.getInstance();

    constructor(private countryDataService: CountryDataService) {}

    public ngOnInit(): void {
        this.countryDataService.getCountries().subscribe((countries) => {
            this.countries = countries;
            this.initInitialCountry();
            this.checkExistingPhoneNumber();
        });

        // 订阅正确的控件实例变化
        this.countryControl.valueChanges.subscribe((dialCode) => {
            this.onCountryChange(dialCode);
        });
    }

    private initInitialCountry(): void {
        const usa = this.countries.find((country) => country.isoCode2 === "US");
        if (usa) {
            this.selectedCountry = usa;
            this.selectedDialCode = usa.dialCodes[0];
            this.countryControl.setValue(this.selectedDialCode, {emitEvent: false});
            this.form.get(this.controlName)?.setValue(this.selectedDialCode);
        }
    }

    private checkExistingPhoneNumber(): void {
        const phoneNumber = this.form.get(this.controlName)?.value;
        if (phoneNumber) {
            this.selectedDialCode = this.extractDialCode(phoneNumber);
            const iso2Code = this.getIso2CodeFromPhoneNumber(phoneNumber);
            if (iso2Code) {
                this.updateCountrySelectionByIsoCode(iso2Code);
            }
        }
    }

    public onCountryChange(dialCode: string): void {
        const selectedCountry = this.countries.find((country) => country.dialCodes.includes(dialCode));
        if (selectedCountry) {
            this.selectedDialCode = dialCode;
            this.selectedCountry = selectedCountry;
            // 优化：提取当前手机号主体部分，再拼接区号
            const currentPhone = this.form.get(this.controlName)?.value.replace(/^\+?\d+/, '');
            const newPhoneValue = `${this.selectedDialCode}${currentPhone}`;
            this.form.get(this.controlName)?.setValue(newPhoneValue);
            this.phoneNumberChange.emit(newPhoneValue);
        }
    }

    public onPhoneNumberInput(event: any): void {
        const inputElement = event.target as HTMLInputElement;
        let inputValue = inputElement.value.trim();
        
        // 格式化手机号并更新表单
        const formattedValue = this.formatPhoneNumber(inputValue);
        this.form.get(this.controlName)?.setValue(formattedValue);
        
        // 提取国家代码并更新选中国家
        const countryCode = this.getCountryCodeFromPhoneNumber(formattedValue);
        if (countryCode) {
            const isoCode = this.phoneNumberUtil.getRegionCodeForCountryCode(parseInt(countryCode));
            if (isoCode) {
                this.updateCountrySelectionByIsoCode(isoCode);
            }
        }

        this.phoneNumberChange.emit(formattedValue);
    }

    private extractDialCode(phoneNumber: string): string {
        for (const country of this.countries) {
            if (Array.isArray(country.dialCodes)) {
                // 按长度倒序匹配，避免短区号优先匹配（比如+1和+123）
                const sortedDialCodes = [...country.dialCodes].sort((a, b) => b.length - a.length);
                for (const dialCode of sortedDialCodes) {
                    if (phoneNumber.startsWith(dialCode)) {
                        return dialCode;
                    }
                }
            }
        }
        return "";
    }

    private updateCountrySelectionByIsoCode(isoCode: string): void {
        const selectedCountry = this.countries.find((country) => country.isoCode2 === isoCode || country.slug === isoCode);
        if (selectedCountry) {
            this.selectedCountry = selectedCountry;
            this.selectedDialCode = selectedCountry.dialCodes[0];
            // 更新下拉控件值，避免UI不一致
            this.countryControl.setValue(this.selectedDialCode, {emitEvent: false});
        }
    }

    private getIso2CodeFromPhoneNumber(phoneNumber: string): string {
        try {
            const number = this.phoneNumberUtil.parse(phoneNumber);
            return this.phoneNumberUtil.getRegionCodeForNumber(number) || "";
        } catch (error) {
            console.error("解析手机号失败:", error);
            return "";
        }
    }

    private getCountryCodeFromPhoneNumber(phoneNumber: string): string {
        try {
            const number = this.phoneNumberUtil.parse(phoneNumber);
            return number?.getCountryCode()?.toString() || "";
        } catch (error) {
            console.error("解析手机号失败:", error);
            return "";
        }
    }

    public formatPhoneNumber(phoneNumber: string): string {
        try {
            // 用当前选中的国家作为默认解析区域
            const number = this.phoneNumberUtil.parse(phoneNumber, this.selectedCountry?.isoCode2);
            return this.phoneNumberUtil.format(number, PhoneNumberFormat.INTERNATIONAL);
        } catch (error) {
            console.error("格式化手机号失败:", error);
            return phoneNumber;
        }
    }
}

2. 修正HTML模板：移除多余表单，绑定正确变量 #

<div class="input-group country-dropdown-group" [formGroup]="form">
    <!-- 移除多余的countryForm，直接绑定独立的countryControl -->
    <p-dropdown 
        [options]="countries" 
        optionLabel="name" 
        optionValue="dialCodes[0]" 
        appendTo="body"
        [filter]="true" 
        filterBy="name"
        [formControl]="countryControl"
        class="p-inputgroup-addon country-flag-selector">
  
        <ng-template let-country pTemplate="selectedItem">
            <div class="country-selector-item">
                <!-- 始终绑定TS中的selectedCountry，确保下拉选择和手机号输入都能同步UI -->
                <img [src]="'assets/flags/' + selectedCountry?.slug + '.svg'" class="country-flag" />
                <span>{{ selectedCountry?.name }}</span>
            </div>
        </ng-template>
  
        <ng-template let-country pTemplate="item">
            <div class="country-selector-item">
                <img [src]="'assets/flags/' + country.slug + '.svg'" class="country-flag" />
                <span>{{ country.name }}</span>
            </div>
        </ng-template>
    </p-dropdown>

    <input 
        type="text" 
        pInputText 
        [formControlName]="controlName" 
        maxlength="15" 
        placeholder="Phone Number" 
        class="form-control" 
        (input)="onPhoneNumberInput($event)"/>        
</div>

3. 关于表单冲突的解释 #

• 外部传入的@Input form是用于管理手机号输入控件的表单组，和下拉控件的countryControl是独立的，不需要嵌套到同一个表单组中。
• 之前的countryForm是多余的，直接使用独立的FormControl绑定下拉组件即可，这样既不会和外部表单冲突，也能正确响应控件值变化。

关键优化点 #

• 统一下拉控件的表单实例，确保valueChanges订阅能正确触发国家切换逻辑。
• 选中项模板始终绑定TS中的selectedCountry，不管是下拉选择还是手机号输入触发的国家变更，都能同步更新UI。
• 优化区号匹配逻辑，按长度倒序匹配避免短区号优先匹配的问题。
• 手机号输入时直接使用格式化后的值更新表单，避免重复赋值导致的逻辑混乱。

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