ngbDatepicker: различает недопустимый формат даты и значение вне диапазона (minDate / maxDate) для обратной связи с пользователем - PullRequest
Новая
       15

ngbDatepicker: различает недопустимый формат даты и значение вне диапазона (minDate / maxDate) для обратной связи с пользователем

0 голосов
/ 01 мая 2018

У меня есть приложение 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, для лучшей обратной связи с пользователем?

1 Ответ

0 голосов
/ 02 мая 2018

Для тех, кто ищет ответ, проверка уже реализована директивой NgbInputDatepicker , поэтому вот решение: 

<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" [minDate]="ngbDatepickerConfig.minDate" [maxDate]="ngbDatepickerConfig.maxDate" required #birthDate="ngModel" placeholder="yyyy-mm-dd"/>
        <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.ngbDate?.invalid">
            Your birth date must be a valid date (Ex: yyyy-mm-dd).
        </small>
        <small class="form-text text-danger" *ngIf="birthDate.errors.ngbDate?.requiredBefore || birthDate.errors.ngbDate?.requiredAfter">
            Your age must be between 18 and 100.
        </small>
    </div>
</div>
...