电话号码无效时，ng2-intl-input 不显示错误答案

【问题标题】：ng2-intl-input doesn't display error when phone number invalid电话号码无效时，ng2-intl-input 不显示错误
【发布时间】：2018-08-06 09:43:28
【问题描述】：

我目前正在尝试在我正在处理的表单上实施电话号码验证规则。即使我的表单使用 Angular 6，我也在使用 ng2-tel-input 库。

我遇到的问题是电话号码无效时无法显示错误消息。

这是我目前的 HTML 代码：

<input  class="form-control phoneField" 
                ng2TelInput 
                (hasError)="hasError($event)"
                (intlTelInputObject)="telInputObject($event)"
                type="text" pattern="^[\s0-9]*$" [required]="emailReq ? false : 
                !null" [(ngModel)]="phoneReq"
                name="phone" #phone="ngModel" phoneValidator style="width: 100% 
                !important">

打字稿代码

import * as ngTelInput from 'ng2-tel-input';
import 'intl-tel-input';
import 'intl-tel-input/build/js/utils';

export class  phoneValidator {
@Input('ng2TelInputOptions') ng2TelInputOptions: any;
@Output('hasError') hasError: EventEmitter<boolean> = new EventEmitter();
@Output('ng2TelOutput') ng2TelOutput: EventEmitter<any> = new EventEmitter();
@Output('intlTelInputObject') intlTelInputObject: EventEmitter<any> = new 
EventEmitter();    ngTelInput: any;

constructor (private el: ElementRef) {}
@HostListener('blur') onBlur() {
    let isInputValid:boolean = this.isInputValid();
    if (isInputValid) {
        let telOutput = this.ngTelInput.intlTelInput("getNumber");
        this.hasError.emit(isInputValid);
        this.ng2TelOutput.emit(telOutput);
    } else 
    {
        this.hasError.emit(isInputValid);
    }
}

isInputValid(): boolean {
    return this.ngTelInput.intlTelInput('isValidNumber') ? true : false;
}
}

我是 Angular 新手，不明白为什么它不起作用。

我尝试查看 hasError 是否正在处理此问题：

   hasError(obj) {
        console.log('hasError: ', obj);
    }

而且它运行良好。如果我输入的电话号码无效，则如果电话号码有效，则显示 false 和 true。但是，即使它明显无效并且不显示错误消息，该表单仍会表现得好像有一个有效数字。

我希望我很清楚，并且有人可以帮助我解决这个问题。

【问题讨论】：

标签： angular typescript angular-cli angular-forms custom-validators

【解决方案1】：

终于找到答案了，希望对大家有所帮助：

打字稿：

  hasError: boolean;
 onError(obj) {
        this.hasError = obj;
        console.log('hasError: ', obj);
    }

HTML：

 <input  class="form-control phoneField" 
                ng2TelInput 
                (hasError)="onError($event)"
                (intlTelInputObject)="telInputObject($event)"
                type="text" pattern="^[\s0-9]*$" [required]="emailReq ? false : !null" [(ngModel)]="phoneReq"
              name="phone" #phone="ngModel" style="width: 100% !important"></div>
              <span class="text-danger" *ngIf="!hasError">Merci de saisir un numéro de téléphone valide</span>

【讨论】：