如何为 ngx-intl-tel-input 设置初始值

Posted 2023-05-09

【中文标题】如何为 ngx-intl-tel-input 设置初始值

【英文标题】：How do I set initial value for ngx-intl-tel-input

【发布时间】：2019-08-22 09:26:27

【问题描述】：

我在我的 Angular 项目中使用 ngx-intl-tel-input 进行电话号码验证。

<form #f="ngForm" [formGroup]="phoneForm">
<ngx-intl-tel-input 
[cssClass]="'custom'" 
[preferredCountries]="['us', 'gb']" 
[enablePlaceholder]="true"
[enableAutoCountrySelect]="true"
[value]="'[phone]'"
name="phone" 
formControlName="phone"></ngx-intl-tel-input>

我需要为来自服务器的字段设置值。

我使用了[value] 属性，但它似乎不起作用。

【参考方案1】：

在 ngAfterViewInit 中，将带有国家代码的电话值修补到表单控件并检测更改。

ngAfterViewInit() this.phoneForm.controls.phone.setValue('[phone]'); this.cd.detectChanges();

【参考方案2】：

当你使用表单控件时，最简单的方法是设置控件的初始值。

对于 ngx-intl-tel-input，您的电话号码必须包含国家/地区代码。

 this.yourFormGroup= this.formBuilder.group(
          phone: ['[phone]', [Validators.required]],
        );