Angular - первое вводимое число di git должно быть нулем

Question

У меня есть поле ввода номера, которое принимает номер мобильного телефона. Я хочу, чтобы пользователь обязательно вводил первый di git как '0' (ноль).
Должен ли я использовать какой-либо шаблон регулярного выражения или просто найти первый di git и, если НЕ ноль, распечатать какое-нибудь сообщение ?
Я не разработчик, так же как найти первый di git в Angular. Я нашел способы в JavaScript, но не особенно для Angular.

Answer 1

Я рекомендую вам использовать настраиваемую директиву для ваших собственных требований,

Вот настраиваемая директива по маске телефона для вас,

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[formControlName][appPhoneMask]',
})
export class PhoneMaskDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(event.target.value, true);
  }


  onInputChange(event, backspace) {
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    }
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '($1)');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '($1) ($2)');
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) ($2)-$3');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) ($2)-$3');
    }
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

Ссылка на репозиторий Stackblitz: https://stackblitz.com/edit/angular6-phone-mask-mu7hsx

Answer 2

вы можете создать шаблон, используя регулярное выражение, а затем использовать этот шаблон в шаблоне. например,

mobileNumPattern = 'yourRegExHere';

Затем в шаблоне HTML вы можете использовать это:

<input name="mobileNum" [pattern]="mobileNumPattern"> </input>+

вы можете прочитать документацию здесь https://angular.io/guide/template-syntax