Angular Reactive Form 中的 DOB 验证

Posted 2023-03-13

【中文标题】Angular Reactive Form 中的 DOB 验证

【英文标题】：DOB validation in Angular Reactive Form

【发布时间】：2018-07-01 20:14:02

【问题描述】：

我正在尝试以 Angular 2+ 反应形式验证出生日期。我想在选定的出生日期超过 100 年时显示错误消息。

前端侧

 <div [ngClass]="setClassDOB()">
 <input class="form-control" type="date"name="dob"formControlName="dob" placeholder="DOB">
 </div>

【参考方案1】：

把它放在你的打字稿中

  validateDOB(e)
    let year = new Date(e).getFullYear();
    let today = new Date().getFullYear();
    if(today - year >= 100)
      //Code Something
    
  

在你的 html 中更新这个

<input class="form-control" (change)="validateDOB(dob)" type="date" name="dob" formControlName="dob" placeholder="DOB">

这可能对你有帮助:)

【讨论】：

` validateDOB(e) let year = new Date(e).getFullYear();让今天 = new Date().getFullYear();如果（今天 - 年 >= 100） 返回 'has-danger': !this.dob.pristine && !this.dob.valid; ` 我已经这样做了，但没有工作

你能分享你的编码吗？

不工作，因为一年让你永远输入数字 - 肯定它说“编码一些东西”，但这应该是解决方案的一部分

【参考方案2】：

您必须创建一个自定义表单验证器来实现这一点

创建一个接受 maxAge 并返回 validatorFn 的自定义验证器

const youngerThanValidator = (maxAge: number): ValidatorFn => control =>
  (new Date()).getFullYear() - (new Date(control.value)).getFullYear() > maxAge 
    ?  younger:  maxAge   
    : null;

以反应形式使用它

form = new FormGroup(
  dob: new FormControl(null, youngerThanValidator(100))
);

当输入被触摸并且无效时在模板中显示错误

<form [formGroup]="form">
  <input type="date" formControlName="dob">
  <span *ngIf="form.get('dob').touched && form.get('dob').getError('younger') as error">
    Too old :  error.maxAge 
  </span>
</form>

【讨论】：

这适用于第一个值集，但随后 control.value 始终为空