Angular 5中[pattern]指令绑定失效问题求助

首先得说，你这里有两个关键问题导致pattern验证没起作用，咱们一步步来修正：

1. 正则表达式完全错配：你用了邮箱规则验证手机号 #

看你的phonePattern，那是标准的邮箱验证正则（^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$），完全和电话号码不搭边，这肯定没法验证手机号。先把正则换成适合电话号码的，比如国内手机号可以用：

// TypeScript里用正则字面量（推荐，不需要额外转义）
public phonePattern = /^1[3-9]\d{9}$/;
// 或者用字符串形式（注意转义反斜杠）
// public phonePattern = "^1[3-9]\\d{9}$";

如果需要支持国际号码或其他格式，你可以根据需求调整正则规则。

2. 模板驱动表单需要正确的验证上下文 #

Angular的模板驱动表单验证，必须满足两个条件才能让pattern指令生效：

• 输入框必须放在<form>标签内，并且表单要绑定#form="ngForm"来获取表单实例
• 输入框必须有name属性，Angular需要通过name来追踪表单控件的状态

修正后的HTML模板应该是这样的：

<form #phoneForm="ngForm">
  <input 
    type="tel"  <!-- 换成tel类型更语义化，不影响验证 -->
    name="phone"  <!-- 必须添加name属性 -->
    [(ngModel)]="contact.phone" 
    [pattern]="phonePattern" 
    placeholder="Enter Phone Number"
    #phoneCtrl="ngModel"  <!-- 可选，方便直接获取控件状态 -->
  />
  <!-- 显示错误信息，当控件无效且被触碰过的时候 -->
  <div *ngIf="phoneCtrl.invalid && phoneCtrl.touched" style="color: red;">
    请输入有效的电话号码
  </div>
</form>

额外必查项 #

如果你的组件所属模块没有导入FormsModule，那ngModel和表单验证都不会工作！记得在模块（比如AppModule）里添加：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入项
    FormsModule
  ]
})
export class AppModule { }

另外，默认情况下Angular会在控件失去焦点时触发验证，所以测试时需要输入内容后点击输入框外部，或者提交表单才能看到验证状态变化。

这样调整后，你的电话号码验证应该就能正常工作了。

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