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”属性与“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）值的用户反馈

2 个答案: