Angular 7 ngx-intl-tel-input onBlur() event 有什么解决方案吗?

Question

我在使用 ngx-intl-tel-input 包的 Angular 7 中遇到了一个问题。 我只想在模糊中检查电话号码。

<ngx-intl-tel-input [cssClass]="'form-control'" [preferredCountries]="preferredCountries"
[enableAutoCountrySelect]="false" [enablePlaceholder]="true" [searchCountryFlag]="true"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" [selectFirstCountry]="false"
[selectedCountryISO]="CountryISO.Canada" [maxLength]="15" [tooltipField]="TooltipLabel.Name"
[phoneValidation]="true" name="PhoneNumber" [(ngModel)]="formModel.PhoneNumber" #PhoneNumber="ngModel">
</ngx-intl-tel-input>

Answer 1

Angular Forms API 具有 updateOn 选项，您可以使用它来触发模糊时的 ngModelChange

组件.html

<ngx-intl-tel-input [cssClass]="'form-control'" [preferredCountries]="preferredCountries"
[enableAutoCountrySelect]="false" [enablePlaceholder]="true" [searchCountryFlag]="true"
(ngModelChange)="ngModelChange($event)"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" [selectFirstCountry]="false"
[selectedCountryISO]="CountryISO.Canada" [maxLength]="15" [tooltipField]="TooltipLabel.Name"
[ngModelOptions]="{updateOn: 'blur'}"
[phoneValidation]="true" name="PhoneNumber" [(ngModel)]="formModel.PhoneNumber" #PhoneNumber="ngModel">
</ngx-intl-tel-input>

组件.ts

onChange(event){
console.log(event);
}

例