在Angular 2中，如何在提交时滚动到必填字段错误

在Angular 2中，如何在提交时滚动到必填字段错误

我在输入文本框上有所需的标记，在提交时我希望它向上滚动到错误

这主要是为了移动体验

这是我的表格：

     <form data-toggle="validator" class="col-xs-12 col-sm-12" role="form" #form2="ngForm" (ngSubmit)="submitForm()" autocomplete="off">                                                    

<input class="form-control-small col-xs-11 col-lg-4" id="JobName" type="text" placeholder="Name of Job" [(ngModel)]="job.name" required />

      <button [disabled]="!form2.form.valid" type="submit">Submit</button> 

    </form>

提交

我创建了一个角度指令来解决这个问题。你可以在这里查一下

步骤：

1.安装模块：

npm i @ismaestro/ngx-scroll-to-first-invalid --save

2.导入

NgxScrollToFirstInvalidModule

：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxScrollToFirstInvalidModule} from '@ismaestro/ngx-scroll-to-first-invalid';

@NgModule({
    imports: [
        BrowserModule,
        NgxScrollToFirstInvalidModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3.在表单中使用指令：

<form [formGroup]="testForm" ngxScrollToFirstInvalid>
  <input id="test-input1" type="text" formControlName="someText1">
  <button (click)="saveForm()"></button>
</form>

希望有帮助！

---

：）

如果您有许多字段，这将是一个问题。嗯，我有，总共有10个字段，如果您同时有5个错误，这将是一个问题？何时滚动？滚动到第一个