（Angular2/4/5/6）如何根据国家验证国际电话号码的长度

是否有图书馆/服务类可用于单独验证国际移动电话号码？例如，新加坡手机号码必须有8位数字，中国手机号码必须有11位数字，等等。目前我使用的是反应式格式的ng4国际电话，允许用户输入他们的手机号码

验证应该根据每个国家/地区显示，而不是对国际电话号码进行一般检查，例如号码是3到14位（我以前使用的是这个号码）

谢谢你的帮助

更新

---

我暂时用它来代替。如果有人需要使用这些答案作为参考，我仍然会在下面留下这些答案

我在angular 6项目中使用过，它工作得非常好。

这是我的自定义解决方案。它对我的解决方案很有效

请将intl tel input安装到您的项目中

npm i intl-tel-input --save

然后创建一个

IntlTelInputComponent

组件，如下所示

intl tel input.component.ts

import {
  AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild, forwardRef, Renderer
} from '@angular/core';
import 'intl-tel-input';
import * as jQuery from 'jquery';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, } from '@angular/forms';

export interface ITimeInputFieldChanged {
  value: string;
  extension: string;
  numberType: string,
  valid: boolean;
  validationError: any
}

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => IntlTelInputComponent),
  multi: true
};

const noop = () => {
};

@Component({
  selector: 'intl-tel-input',
  templateUrl: './intl-tel-input.component.html',
  styleUrls: ['./intl-tel-input.component.scss'],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})

export class IntlTelInputComponent implements ControlValueAccessor {

  @Input() fullValue: string;
  @Output() fullValueChange = new EventEmitter<ITimeInputFieldChanged>();
  @Input() id: string;
  @Input() intlOptions = {
    initialCountry: 'no',
    formatOnDisplay: true,
    separateDialCode: true,
    onlyCountries: ['no', 'be']
  };
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();
  @Output() valueBlur = new EventEmitter<string>();
  @Output() valueFocus = new EventEmitter();
  @ViewChild('intlInput') intlInput: ElementRef;

  private extension: string;

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  constructor(
    private _renderer: Renderer) { }

  onInputChange(value: string) {
    const intlInput = jQuery(this.intlInput.nativeElement)
    this.value = value;
    this.valueChange.emit(value);
    this.fullValue = intlInput.intlTelInput('getNumber');
    this.extension = intlInput.intlTelInput('getSelectedCountryData').dialCode;
    const validationErrorCode = intlInput.intlTelInput('getValidationError');
    let validationMessage = 'VALID';
    switch (validationErrorCode) {
      case 1:
        validationMessage = 'INVALID_COUNTRY_CODE'
        break;
      case 2:
        validationMessage = 'TOO_SHORT'
        break;
      case 3:
        validationMessage = 'TOO_LONG'
        break;
      case 4:
        validationMessage = 'NOT_A_NUMBER'
        break;
      case 5:
        break;
      default:
        validationMessage = 'VALID'
        break;
    }
    this.fullValueChange.emit({
      value: value,
      extension: this.extension,
      numberType: intlInput.intlTelInput('getNumberType'),
      valid: intlInput.intlTelInput('isValidNumber'),
      validationError: validationMessage
    });
    // this.writeValue(this.fullValue);
  }

  onBlur(value: string) {
    this.valueBlur.emit(value);
  }

  onFocus() {
    this.valueFocus.emit();
  }

  writeValue(value: any): void {

    if (value && (value !== this.value)) {
      this.fullValue = value;
      setTimeout(() => {
        const phoneInput = jQuery(`input#${this.id}`);
        phoneInput.intlTelInput('setNumber', this.fullValue);
      }, 100);
    }
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: () => any): void { this.onTouchedCallback = fn; }

  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }

}

:host /deep/.intl-tel-input{
    display: block;
    .country-list{
        overflow-y: auto;
    }
}

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import 'intl-tel-input';
import * as jQuery from 'jquery';

@Directive({
  selector: '[appIntlTelInput]'
})
export class IntlTelInputDirective implements OnInit {

  @Input('appIntlTelInput') appIntlTelInput: any;
  constructor(private el: ElementRef) { }

  ngOnInit() {
    // jQuery.fn.intlTelInput.loadUtils('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.12/js/utils.js');
    // jQuery.fn.intlTelInput.loadUtils('/intl-tel-input/build/js/utils.js');
    jQuery.fn.intlTelInput.loadUtils('assets/js/utils.js');
    jQuery(this.el.nativeElement).intlTelInput(this.appIntlTelInput);
  }
}

国际电话输入指令.ts

import {
  AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild, forwardRef, Renderer
} from '@angular/core';
import 'intl-tel-input';
import * as jQuery from 'jquery';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, } from '@angular/forms';

export interface ITimeInputFieldChanged {
  value: string;
  extension: string;
  numberType: string,
  valid: boolean;
  validationError: any
}

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => IntlTelInputComponent),
  multi: true
};

const noop = () => {
};

@Component({
  selector: 'intl-tel-input',
  templateUrl: './intl-tel-input.component.html',
  styleUrls: ['./intl-tel-input.component.scss'],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})

export class IntlTelInputComponent implements ControlValueAccessor {

  @Input() fullValue: string;
  @Output() fullValueChange = new EventEmitter<ITimeInputFieldChanged>();
  @Input() id: string;
  @Input() intlOptions = {
    initialCountry: 'no',
    formatOnDisplay: true,
    separateDialCode: true,
    onlyCountries: ['no', 'be']
  };
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();
  @Output() valueBlur = new EventEmitter<string>();
  @Output() valueFocus = new EventEmitter();
  @ViewChild('intlInput') intlInput: ElementRef;

  private extension: string;

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  constructor(
    private _renderer: Renderer) { }

  onInputChange(value: string) {
    const intlInput = jQuery(this.intlInput.nativeElement)
    this.value = value;
    this.valueChange.emit(value);
    this.fullValue = intlInput.intlTelInput('getNumber');
    this.extension = intlInput.intlTelInput('getSelectedCountryData').dialCode;
    const validationErrorCode = intlInput.intlTelInput('getValidationError');
    let validationMessage = 'VALID';
    switch (validationErrorCode) {
      case 1:
        validationMessage = 'INVALID_COUNTRY_CODE'
        break;
      case 2:
        validationMessage = 'TOO_SHORT'
        break;
      case 3:
        validationMessage = 'TOO_LONG'
        break;
      case 4:
        validationMessage = 'NOT_A_NUMBER'
        break;
      case 5:
        break;
      default:
        validationMessage = 'VALID'
        break;
    }
    this.fullValueChange.emit({
      value: value,
      extension: this.extension,
      numberType: intlInput.intlTelInput('getNumberType'),
      valid: intlInput.intlTelInput('isValidNumber'),
      validationError: validationMessage
    });
    // this.writeValue(this.fullValue);
  }

  onBlur(value: string) {
    this.valueBlur.emit(value);
  }

  onFocus() {
    this.valueFocus.emit();
  }

  writeValue(value: any): void {

    if (value && (value !== this.value)) {
      this.fullValue = value;
      setTimeout(() => {
        const phoneInput = jQuery(`input#${this.id}`);
        phoneInput.intlTelInput('setNumber', this.fullValue);
      }, 100);
    }
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: () => any): void { this.onTouchedCallback = fn; }

  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }

}

:host /deep/.intl-tel-input{
    display: block;
    .country-list{
        overflow-y: auto;
    }
}

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import 'intl-tel-input';
import * as jQuery from 'jquery';

@Directive({
  selector: '[appIntlTelInput]'
})
export class IntlTelInputDirective implements OnInit {

  @Input('appIntlTelInput') appIntlTelInput: any;
  constructor(private el: ElementRef) { }

  ngOnInit() {
    // jQuery.fn.intlTelInput.loadUtils('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.12/js/utils.js');
    // jQuery.fn.intlTelInput.loadUtils('/intl-tel-input/build/js/utils.js');
    jQuery.fn.intlTelInput.loadUtils('assets/js/utils.js');
    jQuery(this.el.nativeElement).intlTelInput(this.appIntlTelInput);
  }
}

表单内部的用法

 <intl-tel-input formControlName="Mobile" ></intl-tel-input>

---

希望这能解决你的问题。它可以验证您想要的任何国际移动电话号码。

我已经成功地在几个项目中使用过。希望它能解决你的问题。如果您需要，我可以提供一些示例代码。嘿，Janith，谢谢您的帮助，但我正在寻找angular 2/4/5/6解决方案。。你有它的示例代码吗？谢谢请核对我的答案。如果它解决了你的问题，请把它标记为答案，并投票支持我；）谢谢你的回答！我会试着解决它，然后再给你回复：）与此同时，我将暂时投票。嘿，詹妮斯！我已经根据角度要求将组件名称更新为app intl tel input。当前有一个错误，表示appIntlTelInput不存在。。有什么想法吗？谢谢！：）@iblehz sry，我错过了intl-tel-input.directive.ts文件。请检查更新的代码。@IBLEHZ这是否无助于解决您的要求？很抱歉，我在运行代码时遇到问题，例如forwardRef不受支持，组件命名错误，尽管我在modules.ts中导入了指令，但仍未检测到appIntlTelInput。我的工作做得更好，但无论如何，谢谢你的帮助！：）