如何简化Angular表单手机号输入的验证错误函数并修正逻辑？

1. 表单验证配置（组件类） #

在组件中通过响应式表单配置验证规则，覆盖必填、数字格式、长度限制需求：

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-phone-input',
  templateUrl: './phone-input.component.html',
  styleUrls: ['./phone-input.component.css']
})
export class PhoneInputComponent {
  // 构建表单组，配置手机号验证规则
  myForm = this.fb.group({
    phone: ['', [
      Validators.required, // 必填验证
      Validators.minLength(3), // 最小长度3位
      Validators.maxLength(11), // 可根据实际需求调整最大长度（如国内手机号11位）
      Validators.pattern(/^\d+$/) // 仅允许输入纯数字
    ]]
  });

  constructor(private fb: FormBuilder) {}

  // 简化后的错误提示函数
  phoneError(): string | null {
    const phoneControl = this.myForm.get('phone');
    if (!phoneControl || phoneControl.valid) return null;

    // 空值或非数字输入时的提示
    if (phoneControl.hasError('required') || phoneControl.hasError('pattern')) {
      return 'Required: Only number';
    }
    // 位数不符合要求（过多/过少）时的提示
    if (phoneControl.hasError('minlength') || phoneControl.hasError('maxlength')) {
      return '3 min';
    }

    return null;
  }
}

2. MatFormField模板代码 #

在组件模板中绑定表单控件与错误提示：

<mat-form-field appearance="fill">
  <mat-label>Phone Number</mat-label>
  <input 
    matInput 
    formControlName="phone" 
    placeholder="Enter phone number"
    type="tel" <!-- 优化移动端数字输入体验 -->
  >
  <!-- 仅当控件无效时显示错误提示 -->
  <mat-error *ngIf="myForm.get('phone')?.invalid">
    {{ phoneError() }}
  </mat-error>
</mat-form-field>

逻辑说明 #

• 必填/数字校验：输入框为空（触发required错误）或输入非数字内容（触发pattern错误）时，显示Required: Only number。
• 长度校验：输入位数小于3位（触发minlength错误）或超过设置的最大长度（触发maxlength错误）时，显示3 min。
• 简化后的phoneError()函数直接通过控件错误类型判断返回对应提示，逻辑清晰无冗余，便于维护。

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