我们正在Angular 5中开发一个Web应用程序 . 当表单字段未通过验证时(例如,未输入必填字段),字段下方会显示一条错误消息,按下面的任何其他字段 .

<input type="text" class="form-control" formControlName="timeSinceArrearsMths" [textMask]="{mask: this.masks.positiveNumbersOrHyphen}">
<div *ngIf="generalForm.controls.timeSinceArrearsMths.invalid && (generalForm.controls.timeSinceArrearsMths.dirty || generalForm.controls.timeSinceArrearsMths.touched)" class="alert alert-danger">
    <div *ngIf="generalForm.controls.timeSinceArrearsMths.errors.required">
        Time Since Arrears (Mths) is required
    </div>              
    <div *ngIf="generalForm.controls.timeSinceArrearsMths.errors.max">
        Time Since Arrears (Mths) must be betweeen 0 and 13
    </div>  
</div>

如果光标位于窗口底部的字段中,并且未输入值或输入无效值,则用户选中下一个字段,会发生以下情况 -

  • 焦点移动到下一个字段

  • 窗口自动向下滚动以使下一个字段进入视图 . 在某些情况下(不确定什么控制滚动距离)这足以使视野进入视野

  • 字段的Angular 5表单验证启动并发现错误

  • 显示包含错误消息的div

  • 为错误消息腾出空间,按下它下面的字段(包括新的焦点字段)

  • 屏幕上不再显示新的焦点字段

验证发生后是否有任何方法可以重置滚动位置并显示消息?

谢谢