제출 단추를 누르기 전에 각도 형식이 검증되는 이유는 무엇입니까?

Question

반응 각 양식이 있습니다. 페이지가로드 될 때 양식에 이미 오류가 있는지 확인합니다.

오류 지시문을 스크롤하고 오류 div에 집중하기 위해 스크롤을 사용하려고하지만 양식이 이미 유효성 검사를 거치지 않았습니다.

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

지금 업데이트

내가이

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

일들처럼 사용하고는 그 유효성 검사 오류가 표시됩니다 양식을 제출하고 난 초점과 스크롤 이동하려는에 거기 있니? 도와주세요 ?

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

,210

DEMO

---

올드 답 :. 당신은 user.get ('이메일') 시작시 거짓 래퍼에 감동을 확인하는

는 전체 범위를 제거하고 scrollTo는 무시됩니다. 지시문을 실제 입력으로 이동하고 변경하십시오