我有一个Reactive Angular Form . 页面加载时,表格已经检查错误 .
我试图使用滚动到错误指令,以滚动和专注于错误div但形式永远不会到那里它已经验证 .
import { ElementRef, HostBinding, Input } from '@angular/core';
import { Directive } from '@angular/core';
@Directive({
selector: '[scrollTo]'
})
export class ScrollDirective {
constructor(private elRef:ElementRef) {}
@HostBinding('hidden') isError:boolean = false;
@Input() set scrollTo(cond) {
console.log(cond);
this.isError = cond;
if(cond) {
this.elRef.nativeElement.scrollIntoView();
this.elRef.nativeElement.focus();
}
}
}
这是我检查错误的地方,但它已经被检查,如果我把scrollTo放在外面,它首先滚动到 .
<div class="row">
<div class="col-md-12">
<span *ngIf="user.get('email').touched && !user.get('email').valid && !user.get('email').pristine">
<small [scrollTo] = "user.get('email').valid">Invalid email</small>
</span>
</div>
</div>
Update
现在我正在使用它
<div class="col-md-4" [scrollTo] = "user.get('age').valid">
<md-input-container>
<input mdInput type="number" formControlName="age" placeholder="Age" validate-onblur>
</md-input-container>
</div>
事情是,在提交表单时将显示验证错误,我希望焦点和滚动移动到那里?请帮忙 ?
1 回答
将指令实现移动到输入,以便您可以直接引用它 . 要在开始时停用触发,请设置属性 . 提交表单时直接在模板中更改该属性 . 在指令中使用DoCheck来跟踪输入有效性并触发滚动和焦点:
HTML:
Component
Directive:
DEMO
Old answer:
您正在检查user.get('email') . 触及包装器,在开始时为false,删除整个范围并忽略scrollTo . 将指令移动到实际输入并进行更改