时间戳

首页 > 解决方案 > 如何在 Angular 的 ngx-intl-tel-input 中添加验证？

angular - 如何在 Angular 的 ngx-intl-tel-input 中添加验证？

问题描述

每当用户输入错误的数字或将其留空时，我想验证移动输入字段的 ngx-intl-tel-input。

我正在这样做：

<ngx-intl-tel-input
    [cssClass]="'form-control country-tel-code'"                             
    [enableAutoCountrySelect]="true" 
    [enablePlaceholder]="true" 
    [preferredCountries]="preferredCountries"
    [searchCountryFlag]="true"
    [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
    [selectFirstCountry]="false" 
    [selectedCountryISO]="CountryISO.Nigeria"
    [maxLength]="15" 
    [tooltipField]="TooltipLabel.Name" 
    [phoneValidation]="true"
    [separateDialCode]="separateDialCode"
    formControlName="mobile" [ngClass]="{ 'is-invalid': submitted && mobileRequired || mobileValid }">
</ngx-intl-tel-input>
<div *ngIf="submitted && f.mobile.errors" class="invalid-feedback">
    <div *ngIf="mobileRequired">Mobile No. is required</div>
    <div *ngIf="mobileValid">Invalid Mobile No.</div>
</div>

& 在我的 controller.ts 文件中：

onSubmit() {
    this.submitted = true;

    if (this.registerForm.invalid) {
        if (this.registerForm.controls.mobile.errors.required) {
            this.mobileRequired = true;
        }
        if (!this.registerForm.controls.mobile.errors.validatePhoneNumber.valid) {
            this.mobileValid = true;
        }
        return;
    }
}

但没有给出任何消息。请帮忙！！！

标签： angular

解决方案

试试下面的方法：

[cssClass]="{ 'form-control' : 1, 'is-invalid': submitted && f.mobile.errors }"

这将与引导程序一起使用

推荐阅读