Question

我正在处理美国电话号码表格：

let phoneRegEx = '^\([1-9]{3}\)\s{1}[0-9]{3}-[0-9]{4}$';

class PhoneFormComponent {

    ...

    buildForm(): void {
        this.form = this.formBuilder.group({
          number: [
            this.phone ? this.phoneNumberPipe.transform(this.phone.number) : '', [
              Validators.required,
              Validators.pattern(phoneRegEx),
            ]
          ]
        });
    }
}

我也有一个根据我的喜好格式化电话号码的管道：

@Pipe({name: 'phoneNumber'})
export class PhoneNumberPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;

    let areaCode = value.substring(0, 3);
    let prefix = value.substring(3, 6);
    let number = value.substring(6);

    return `(${areaCode}) ${prefix}-${number}`;
  }
}

电话号码存储为字符串，在我需要访问的API中没有空格或格式，因此我在填充表单时利用管道格式化服务提供的电话号码，然后匹配相同的模式进行输入。在将值提供回API时，我删除了格式。

根据regex101.com，我的正则表达式应按预期工作：https://regex101.com/r/9TRysJ/1，例如（111）111-1111 应该有效。

但是，我的Angular表单始终报告电话字段的值无效。我做错了什么？

Answer 1

我不知道Angular

但它的REGEXP应该有效。

\((\d{3})\)\s(\d{3})\-(\d{4})

<强>结果：

Full match  0-14 `(123) 456-7890`
Group 1.    1-4 `123`
Group 2.    6-9 `456`
Group 3.    10-14 `7890`

我基本上将每个值分成一个组。

然后你可以使用

($1) $2-$3

<强>解释

$1 = 123
$2 = 456
$3 = 7890

注意： $ 0 =＆gt;完整比赛(123)456-7890

Angular 2 Pattern Validator报告无效错误...？

1 个答案: