Angular 2单输入表单验证：邮箱有效但手机号无法启用继续按钮

看起来你遇到的问题是：输入邮箱时「继续」按钮能正常启用，但输入10位手机号时按钮没反应对吧？我帮你梳理下可行的解决方案：

1. 先搞懂问题根源 #

你之前的代码应该只给输入框绑定了单一的邮箱验证规则，导致只有符合邮箱格式的输入才会被判定为有效，10位手机号不符合邮箱规则，所以表单一直处于无效状态，按钮也就无法启用。我们需要把验证逻辑改成「邮箱格式正确」或「是10位纯数字手机号」时都判定为有效。

2. 快速修复：模板直接判断（适合简单场景） #

如果不想改太多代码，可以直接在按钮的[disabled]属性里同时判断两个条件，不用依赖表单的默认验证：

修改后的模板代码如下：

<div class="login_div">
  <form #loginForm="ngForm">
    <input 
      type="text" 
      name="userInput" 
      ngModel 
      #userInput="ngModel"
      placeholder="输入邮箱或手机号"
    >
    <button 
      type="submit" 
      [disabled]="!(
        (userInput.value && /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(userInput.value)) || 
        (userInput.value && userInput.value.length === 10 && /^\d+$/.test(userInput.value))
      )"
    >
      继续
    </button>
  </form>
</div>

这里的核心逻辑是：

• 第一个条件：验证输入是否符合标准邮箱格式
• 第二个条件：验证输入是否是10位纯数字
• 只要满足其中一个条件，按钮就会启用

3. 更规范的方案：自定义验证器（推荐） #

如果想让验证逻辑更清晰、可复用，符合Angular表单验证的规范，可以自定义一个验证器：

第一步：编写自定义验证函数 #

在组件文件或者单独的验证器文件里，写一个同时支持邮箱和手机号的验证函数：

import { ValidatorFn, AbstractControl } from '@angular/forms';

// 自定义验证器：邮箱或10位手机号
export function emailOrPhoneValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const inputValue = control.value?.trim();
    
    // 空输入时返回必填错误
    if (!inputValue) {
      return { required: true };
    }

    // 邮箱正则规则
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    // 10位手机号正则规则
    const phonePattern = /^\d{10}$/;

    // 满足任一规则则验证通过
    if (emailPattern.test(inputValue) || phonePattern.test(inputValue)) {
      return null;
    }

    // 都不满足则返回错误标记
    return { invalidInput: '请输入有效的邮箱或10位手机号' };
  };
}

第二步：在组件中使用这个验证器 #

如果用的是模板驱动表单，可以这样绑定：

import { Component } from '@angular/core';
import { emailOrPhoneValidator } from './validators';

@Component({
  selector: 'app-login-component',
  templateUrl: './login-component.component.html'
})
export class LoginComponentComponent {
  // 把自定义验证器暴露给模板
  emailOrPhoneValidator = emailOrPhoneValidator;
}

然后修改模板：

<div class="login_div">
  <form #loginForm="ngForm">
    <input 
      type="text" 
      name="userInput" 
      ngModel 
      #userInput="ngModel"
      [validator]="emailOrPhoneValidator()"
      placeholder="输入邮箱或手机号"
    >
    <!-- 可选：显示错误提示 -->
    <div *ngIf="userInput.invalid && userInput.touched">
      <span *ngIf="userInput.errors?.required">请输入内容</span>
      <span *ngIf="userInput.errors?.invalidInput">请输入有效的邮箱或10位手机号</span>
    </div>
    <button 
      type="submit" 
      [disabled]="loginForm.invalid"
    >
      继续
    </button>
  </form>
</div>

如果用的是响应式表单，代码会更简洁：

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { emailOrPhoneValidator } from './validators';

@Component({
  selector: 'app-login-component',
  templateUrl: './login-component.component.html'
})
export class LoginComponentComponent {
  loginForm = new FormGroup({
    userInput: new FormControl('', [
      Validators.required,
      emailOrPhoneValidator()
    ])
  });
}

对应的模板：

<div class="login_div">
  <form [formGroup]="loginForm">
    <input 
      type="text" 
      formControlName="userInput"
      placeholder="输入邮箱或手机号"
    >
    <div *ngIf="loginForm.get('userInput')?.invalid && loginForm.get('userInput')?.touched">
      <span *ngIf="loginForm.get('userInput')?.errors?.required">请输入内容</span>
      <span *ngIf="loginForm.get('userInput')?.errors?.invalidInput">请输入有效的邮箱或10位手机号</span>
    </div>
    <button 
      type="submit" 
      [disabled]="loginForm.invalid"
    >
      继续
    </button>
  </form>
</div>

4. 排查你原有代码的问题 #

你之前的代码大概率是给输入框加了email内置验证器，比如：

<input type="text" name="email" ngModel email>

这种情况下，只有符合邮箱格式的输入才会让输入框变为valid，10位手机号显然不符合邮箱规则，所以表单一直无效，按钮无法启用。改成上面的二选一验证逻辑就能解决啦。

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