Angular Reactive Form中的DOB验证

Question

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

前端

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

Answer 1

将其放入您的Typescripting

  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">

这可能对你有所帮助:)。

Answer 2

我仍有问题

HTML

<div class="col-md-4" style="margin-left: -24PX;">
<div  [ngClass]="setClassDOB()">
<input class="form-control lhttt" (change)="validateDOB(dob)" type="date" 
name="dob" formControlName="dob" placeholder="DOB">
</div>
</div>

TS

  validateDOB(e){
let year = new Date(e).getFullYear();
let today = new Date().getFullYear();
if(today - year <= 100){
  return { 'has-danger': !this.dob.pristine && !this.dob.valid};
}}

接受

Answer 3

您必须创建一个自定义表单验证器才能实现

1. 创建一个采用maxAge并返回validatorFn的自定义验证器

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

1. 以反应形式使用它

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

1. 触摸输入无效时在模板中显示错误

<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>