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

Question

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

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

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

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

Answer 1

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

ngAfterViewInit(){ this.phoneForm.controls.phone.setValue('+919898989898'); this.cd.detectChanges(); }

Answer 2

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

对于 ngx-intl-tel-input，您的电话号码包含国家代码很重要。

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