ngbDatepicker : 区分无效日期格式和超出范围(minDate/maxDate) 值以供用户反馈

Question

我有一个 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" 时，无论我输入什么值，它总是被认为是无效的。（很可能是因为 "pattern" 属性与 "ngbDatepicker" 属性不兼容）

我的问题：是否有替代方法可以区分格式无效的值（'yyyy-mm-dd' 除外）和超出 minDate/maxDate 中指定范围的值以获得更好的用户反馈？

Answer 1

对于那些正在寻找答案的人，指令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>

Answer 2

对于不再使用 ngModel 的更新版本，您可以执行类似这样的操作来使用 ngbDatepicker 的验证。如果有人决定尝试输入日期，但他们搞砸了，这会捕捉到它。

ngOnInit() {
  this.employeeForm = this.formBuilder.group({
    HireDate: ['', Validators.required],
  });
}

get form() {
  return this.employeeForm.controls;
}

<label for="HireDate">Hire Date *</label>
<input
    id="HireDate"
    class="form-control"
    formControlName="HireDate"
    type="text"
    placeholder="YYYY-MM-DD"
    (focus)="HireDatePicker.toggle()"
    #HireDatePicker="ngbDatepicker"
    ngbDatepicker
    required
>
<div *ngIf="submitted && form.HireDate.errors" class="invalid-feedback">
    <div *ngIf="form.HireDate.errors.required">Hire date is required</div>
    <div *ngIf="form.HireDate.errors.ngbDate.invalid">Hire date must be YYYY-MM-DD</div>
</div>

ngbDatepicker : 区分无效日期格式和超出范围(minDate/maxDate) 值以供用户反馈

ngbDatepicker : Differentiate between invalid date format and out of range(minDate/maxDate) value for user feedback

html

validation

jhipster

ng-bootstrap

angular