提出ボタンを押す前に角形が検証されるのはなぜですか？

Question

私は反応角形をしています。ページが読み込まれると、フォームはすでにエラーがチェックされています。

エラーディレクティブにスクロールしてフォーカスするためにscroll to errorディレクティブを使用しようとしていますが、フォームは決してそこに行くわけではありません。

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="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> 

のようなものを、それを使用しています

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

更新

は、上のフォームは、検証エラーが表示されます提出し、私はフォーカスとスクロールが移動するということですそこ ？助けてください ？

Answer 1

ディレクティブ実装を入力に移動し、直接参照できるようにします。開始時に発砲を無効にするには、プロパティを設定します。フォームが送信されるときに、テンプレート内のそのプロパティを直接変更します。入力妥当性を追跡するためにディレクティブでDoCheckを使用してスクロールを発射して焦点を合わせる：

HTML：

<form (submit)="start = user.get('email').valid; onSubmit(); " ....> 
..... 

<input [scrollTo] = "!user.get('email').valid && !start" ....> 
<span [hidden] = "user.get('email').valid"> 
    <small>Invalid email</small> 
</span> 

コンポーネント

start = true; 

指令：

export class ScrollDirective implements DoCheck { 
    constructor(private elRef:ElementRef) {} 

    @Input() scrollTo ; 


    ngDoCheck(){ 
     if(this.scrollTo) { 
      this.elRef.nativeElement.scrollIntoView(); 
      this.elRef.nativeElement.focus(); 
     } 
} 

DEMO

---

旧答え：。

あなたはuser.get（「メール」）をチェックしている開始時に偽のラッパーに触れ、全体のスパンが削除され、scrollToは無視されます。指示文を実際の入力に移動して変更します