Angular Reactive Form 中的 DOB 验证答案

【问题标题】：DOB validation in Angular Reactive FormAngular Reactive Form 中的 DOB 验证
【发布时间】：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>

【问题讨论】：

标签： angular angular2-forms angular-reactive-forms angular4-forms

【解决方案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 始终为空