我有一个奇怪的要求,希望得到一些帮助。
我需要关注单击按钮(不是提交)后发现的第一个表单无效输入。表单相当大,因此屏幕需要滚动到第一个无效输入。
这个 AngularJS 答案将是我需要的,但不知道像这样的指令是否适合 Angular 2:
Set focus on first invalid input in AngularJs form
Angular 2 的方法是什么?感谢所有的帮助!
最佳答案
这对我有用。这不是最优雅的解决方案,但考虑到我们在执行此特定任务时都遇到的 Angular 中的限制,它可以胜任。
scrollTo(el: Element): void {
if(el) {
el.scrollIntoView({ behavior: 'smooth' });
}
}
scrollToError(): void {
const firstElementWithError = document.querySelector('.ng-invalid');
this.scrollTo(firstElementWithError);
}
async scrollIfFormHasErrors(form: FormGroup): Promise <any> {
await form.invalid;
this.scrollToError();
}
这行得通,让您可以避免操纵 DOM。它只是通过返回返回列表中第一个元素的 document.querySelector()
转到页面上带有 .ng-invalid
的第一个元素。
使用方法:
this.scrollIfFormHasErrors(this.form).then(() => {
// Run any additional functionality if you need to.
});
我还在 Angular 的 Github 页面上发布了这个:https://github.com/angular/angular/issues/13158#issuecomment-432275834
关于javascript - Angular 2关注点击/事件后的第一个无效输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41173027/