在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); 
    } 
});