Ionic 7/Angular表单控件验证失效问题求助

开发Ionic 7应用时，设置了手机号表单验证以控制发送按钮显示，但表单始终处于无效状态，怀疑问题出在正则表达式上，相关代码如下：

HTML组件代码 #

<ion-content class="ion-padding">
  <h3 class="tittle">Type Cellphone</h3>
  <form [formGroup]="phoneForm" (ngSubmit)="submitForm()">
    <ion-item>
      <ion-input class="margin-top"
        label="Número de celular"
        type="tel"
        formControlName="phoneNum"
        labelPlacement="floating"
        placeholder="+57 (xxx) xxx-xxxx"
        [maskito]="phoneMask"
        [maskitoElement]="maskPredicate">
      </ion-input>
    </ion-item>
  <div class="ion-text-center margin-top">
    <ion-button type="submit" *ngIf="phoneForm.valid" fill="outline">Send SMS</ion-button>
  </div>
</form>
</ion-content>

TS组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MaskitoOptions, MaskitoElementPredicateAsync } from '@maskito/core';

@Component({
  selector: 'app-phone-method',
  templateUrl: './phone-method.component.html',
  styleUrls: ['./phone-method.component.scss'],
})
export class PhoneMethodComponent  implements OnInit {
  phoneForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.phoneForm = this.formBuilder.group({
      phoneNum: ['',Validators.compose([Validators.required,Validators.pattern("/^\+\d{2}\s\(\d{3}\)\s\d{3}-\d{4}$/")])],
    });
  }

  submitForm() {
    let phone=this.phoneForm.get('phoneNum')?.value;
    if (this.phoneForm.valid) {
      console.log(phone);
    }
  }

  readonly phoneMask: MaskitoOptions = {
    mask: ['+','5','7',' ','(',/\d/,/\d/,/\d/,')',' ',/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/],
  };
  readonly maskPredicate: MaskitoElementPredicateAsync = async (el) => (el as HTMLIonInputElement).getInputElement();

  ngOnInit() {}
}

问题原因 #

核心问题出在正则表达式的写法错误：
Angular的Validators.pattern()接受两种参数：

1. 正则表达式字面量（比如/abc/）
2. 不带正则分隔符/的字符串（此时会自动转换为正则）

你当前传递的是带/的字符串"/^\+\d{2}\s\(\d{3}\)\s\d{3}-\d{4}$/"，这会导致正则引擎把/当作匹配内容的一部分，而不是正则的分隔符，自然无法匹配Maskito生成的手机号格式。

解决方案 #

修正正则表达式的写法，二选一即可：

方案1：使用正则字面量 #

直接传递正则表达式，不需要包裹引号：

this.phoneForm = this.formBuilder.group({
  phoneNum: ['', Validators.compose([
    Validators.required,
    Validators.pattern(/^\+\d{2}\s\(\d{3}\)\s\d{3}-\d{4}$/)
  ])],
});

方案2：使用转义后的字符串 #

如果用字符串传递，需要去掉首尾的/，同时对特殊字符进行转义：

this.phoneForm = this.formBuilder.group({
  phoneNum: ['', Validators.compose([
    Validators.required,
    Validators.pattern("^\\+\\d{2}\\s\\(\\d{3}\\)\\s\\d{3}-\\d{4}$")
  ])],
});

辅助调试建议 #

可以在模板中添加错误信息展示，方便快速定位问题：

<ion-note color="danger" *ngIf="phoneForm.get('phoneNum')?.hasError('pattern')">
  手机号格式不正确
</ion-note>

内容的提问来源于stack exchange，提问作者AlejoDev