道布角反应形式的验证

Question

我试图验证出生日期角2+反应形式。当选定的道布日期超过100岁时，我想显示错误消息。

前端

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

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

(这可能对你有帮助:)

Answer 2

您必须创建一个自定义表单验证器来实现此目的。

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>