在Angular 2中如何在提交时滚动到所需的字段错误

Question

在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> 

Answer 1

写了一类“有错误”有错误的表单元素上：

<input [ngClass]="{ 'has-error': form2.submitted && !jobName.valid }" class="form-control-small" name="jobName" id="JobName" type="text" placeholder="Name of Job" [(ngModel)]="job.name" required /> 

然后，如果你可以在你的模板中使用JQuery你可以使用以下内容：

$('form button:submit').click(function() { 
    if ($('form .has-error').length > 0) { 
    $('html, body').animate({ 
     scrollTop: $('form .has-error').first().offset().top - 50 
    }, 500); 
    } 
});