Angular 2关注点击事件后的第一个无效输入
问题描述:
我有一个奇怪的要求,希望得到一些帮助。Angular 2关注点击事件后的第一个无效输入
我需要关注单击按钮(未提交)后发现的第一个表单的无效输入。表单很大,因此屏幕需要滚动到第一个无效输入。
这AngularJS答案是什么,我需要,但不知道这样的指令将在角2要走的路:
Set focus on first invalid input in AngularJs form
会是什么角2路去做这个?感谢所有的帮助!
答
不幸的是,我现在不能测试这个,所以可能会有一些bug,但应该主要在那里。 只需将其添加到您的表单。
import {Directive, Input, HostListener} from '@angular/core';
import {NgForm} from '@angular/forms';
@Directive({ selector: '[scrollToFirstInvalid]' })
export class ScrollToFirstInvalidDirective {
@Input('scrollToFirstInvalid') form: NgForm;
constructor() {
}
@HostListener('submit', ['$event'])
onSubmit(event) {
if(!this.form.valid) {
let target;
for (var i in this.form.controls) {
if(!this.form.controls[i].valid) {
target = this.form.controls[i];
break;
}
}
if(target) {
$('html,body').animate({scrollTop: $(target.nativeElement).offset().top}, 'slow');
}
}
}
}
答
如果使用AngularMaterial,所述MdInputDirective具有焦点()方法,该方法允许直接集中在输入字段。
在你的组件,就获得与@ViewChildren注释的参考所有的投入,这样的:
@ViewChildren(MdInputDirective) inputs: QueryList<MdInputDirective>;
然后,在第一个无效输入设定的重点是如此简单:
this.inputs.find(input => !input._ngControl.valid).focus()
答
我建议把这个在服务,对我来说它的工作是这样的:
if (this.form.valid) {
//submit
} else {
let control;
Object.keys(this.form.controls).reverse().forEach((field) => {
if (this.form.get(field).invalid) {
control = this.form.get(field);
control.markAsDirty();
}
});
if(control) {
let el = $('.ng-invalid:not(form):first');
$('html,body').animate({scrollTop: (el.offset().top - 20)}, 'slow',() => {
el.focus();
});
}
}
答
我不知道这是否有效的方法,但这对我来说很好。
import { Directive, Input, HostListener, ElementRef } from '@angular/core';
import { NgForm } from '@angular/forms';
import * as $ from 'jquery';
@Directive({ selector: '[accessible-form]' })
export class AccessibleForm {
@Input('form') form: NgForm;
constructor(private el: ElementRef) {
}
@HostListener('submit', ['$event'])
onSubmit(event) {
event.preventDefault();
if (!this.form.valid) {
let target;
target = this.el.nativeElement.querySelector('.ng-invalid')
if (target) {
$('html,body').animate({ scrollTop: $(target).offset().top }, 'slow');
target.focus();
}
}
}
}
在HTML
<form [formGroup]="addUserForm" class="form mt-30" (ngSubmit)="updateUser(addUserForm)" accessible-form [form]="addUserForm"></form>
我已经混在这个angularjs访问的形式指令的方法。 改进是欢迎的!
对不起,迟到的回应,我会得到一个测试这个!感谢您的帮助! –
我们如何在没有jQuery的情况下做到这一点? –
那么你可以移动到没有动画的元素,或者你可以编写自己的自定义动画功能(或使用别人的elses)。像这样的东西(http://*.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation) – Baconbeastnz