Angular 2+自定义输入类型（如<input type='dob'>）及自定义验证实现求助

没问题！在Angular 2+里实现自定义输入类型（比如<input type='dob'>）并添加自定义验证逻辑，核心是利用ControlValueAccessor接口让自定义组件和Angular表单系统打通，再配合自定义验证器实现需求。我给你一步步拆解实现方案：

首先我们要创建一个独立的组件，它能和Angular的模板驱动/响应式表单无缝配合。比如创建dob-input.component.ts：

import { Component, forwardRef, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'input[type="dob"], app-dob-input', // 支持原生<input type='dob'>写法和组件写法
  template: `
    <input 
      type="text" 
      placeholder="DD/MM/YYYY" 
      [(ngModel)]="dobValue"
      (blur)="onTouched()"
    >
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DobInputComponent),
      multi: true
    }
  ]
})
export class DobInputComponent implements ControlValueAccessor {
  dobValue: string = '';
  private onChange: (value: Date | null) => void = () => {};
  private onTouched: () => void = () => {};

  // 从表单模型写入值到组件
  writeValue(value: Date | null): void {
    if (value) {
      // 将Date对象格式化为DD/MM/YYYY字符串
      const day = value.getDate().toString().padStart(2, '0');
      const month = (value.getMonth() + 1).toString().padStart(2, '0');
      const year = value.getFullYear();
      this.dobValue = `${day}/${month}/${year}`;
    } else {
      this.dobValue = '';
    }
  }

  // 注册值变化回调
  registerOnChange(fn: (value: Date | null) => void): void {
    this.onChange = fn;
  }

  // 注册触摸回调
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // 监听输入变化，解析为Date对象并通知表单
  @HostListener('input', ['$event.target.value'])
  onInputChange(value: string): void {
    const date = this.parseDob(value);
    this.onChange(date);
  }

  // 解析DD/MM/YYYY字符串为Date对象
  private parseDob(value: string): Date | null {
    const parts = value.split('/');
    if (parts.length !== 3) return null;
    const day = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10) - 1; // 月份从0开始
    const year = parseInt(parts[2], 10);
    const date = new Date(year, month, day);
    // 验证日期是否合法（比如2月30日这种无效日期）
    return date.getDate() === day && date.getMonth() === month && date.getFullYear() === year ? date : null;
  }
}

这里我们通过selector支持了原生<input type='dob'>的写法，同时也可以用组件形式<app-dob-input>，灵活性更高。

接下来我们给这个组件加上出生日期的专属验证，比如验证日期是否有效、是否是过去的日期。我们可以创建一个自定义验证器，然后通过NG_VALIDATORS提供给组件：

先在组件里导入相关模块，然后修改代码：

// 新增导入
import { NG_VALIDATORS, Validator, ValidationErrors, AbstractControl } from '@angular/forms';

// 修改providers数组，添加验证器
providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DobInputComponent),
    multi: true
  },
  {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => DobInputComponent),
    multi: true
  }
]

// 实现Validator接口
export class DobInputComponent implements ControlValueAccessor, Validator {
  // ... 之前的代码保持不变 ...

  validate(control: AbstractControl): ValidationErrors | null {
    const value = control.value as Date | null;
    if (!value) {
      return { required: true }; // 必填验证
    }
    if (isNaN(value.getTime())) {
      return { invalidDob: '请输入有效的日期格式（DD/MM/YYYY）' };
    }
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    if (value > today) {
      return { futureDate: '出生日期不能是未来日期' };
    }
    return null;
  }
}

这样当用户输入的日期不合法、是未来日期或者为空时，表单控件会自动标记为无效，并返回对应的错误信息。

现在你可以在响应式表单或者模板驱动表单里使用这个自定义输入了：

响应式表单示例 #

在父组件的ts文件中：

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

@Component({
  selector: 'app-profile',
  template: `
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
      <label>出生日期：</label>
      <input type="dob" formControlName="dob">
      <!-- 显示错误信息 -->
      <div *ngIf="profileForm.get('dob')?.hasError('required')">
        请输入出生日期
      </div>
      <div *ngIf="profileForm.get('dob')?.hasError('invalidDob')">
        {{ profileForm.get('dob')?.getError('invalidDob') }}
      </div>
      <div *ngIf="profileForm.get('dob')?.hasError('futureDate')">
        {{ profileForm.get('dob')?.getError('futureDate') }}
      </div>
      <button type="submit" [disabled]="profileForm.invalid">提交</button>
    </form>
  `
})
export class ProfileComponent implements OnInit {
  profileForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.profileForm = this.fb.group({
      dob: [null, Validators.required] // 可以结合内置验证器
    });
  }

  onSubmit(): void {
    console.log('表单数据：', this.profileForm.value);
    // dob的值是Date对象，可以直接使用
  }
}

模板驱动表单示例 #

在父组件模板中：

<form #profileForm="ngForm" (ngSubmit)="onSubmit(profileForm)">
  <label>出生日期：</label>
  <input type="dob" name="dob" ngModel required #dob="ngModel">
  <div *ngIf="dob.invalid && (dob.dirty || dob.touched)">
    <div *ngIf="dob.errors?.['required']">请输入出生日期</div>
    <div *ngIf="dob.errors?.['invalidDob']">{{ dob.errors?.['invalidDob'] }}</div>
    <div *ngIf="dob.errors?.['futureDate']">{{ dob.errors?.['futureDate'] }}</div>
  </div>
  <button type="submit" [disabled]="profileForm.invalid">提交</button>
</form>

最后别忘了在你的Angular模块中声明DobInputComponent，这样才能正常使用它哦！

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