У меня есть приложение jHipster, и это поле ввода даты рождения:
<div class="form-group">
<label class="form-control-label" for="field_birthDate">Birth Date</label>
<div class="input-group">
<input id="field_birthDate" type="text" class="form-control" name="birthDate" ngbDatepicker #birthDateDp="ngbDatepicker" [(ngModel)]="registerAccount.birthDate"
required #birthDate="ngModel" placeholder="yyyy-mm-dd" [minDate]="birthDateValidation.minDate" [maxDate]="birthDateValidation.maxDate" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"/>
<span class="input-group-append">
<button type="button" class="btn btn-secondary" (click)="birthDateDp.toggle()"><i class="fa fa-calendar"></i></button>
</span>
</div>
<div *ngIf="birthDate.dirty && birthDate.invalid">
<small class="form-text text-danger" *ngIf="birthDate.errors.required">
Your birth date is required.
</small>
<small class="form-text text-danger" *ngIf="birthDate.errors.pattern">
Your birth date must be a valid date (Ex: yyyy-mm-dd).
</small>
<small class="form-text text-danger" *ngIf="!birthDate.errors.required && !birthDate.errors.pattern">
Your age must be between 18 and 100.
</small>
</div>
</div>
Проблема с этим решением заключается в том, что когда я добавляю «шаблон» в поле ввода, независимо от того, какое значение я ввожу, он всегда считается недействительным. (скорее всего, потому что атрибут «pattern» несовместим с атрибутом «ngbDatepicker»)
Мой вопрос: есть ли альтернатива, в которой я могу различить значение с недопустимым форматом (отличное от 'гггг-мм-дд') и значение вне диапазона, указанного в minDate / maxDate, для лучшей обратной связи с пользователем?