角度2で送信時に必要なフィールドエラーにスクロールする方法

Question

角度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

エラーとフォーム要素の「エラー」を有しているクラスを書く：あなたは、テンプレート内のjQueryを使用することができます場合は、

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

以下を使用することができます：

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