Pourquoi un formulaire angulaire est-il validé avant même que j'appuie sur le bouton Soumettre?

Question

J'ai une forme angulaire réactive. Lorsque la page Charge le formulaire est déjà vérifié pour les erreurs.

J'essaie d'utiliser une directive scroll to error afin de faire défiler et de me focaliser sur la div d'erreur mais le formulaire ne va jamais là il est déjà validé.

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

} 

C'est là je vérifie l'erreur, mais il est déjà vérifié et si je mets l'scrollTo en dehors il défile au premier.

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

Mise à jour

Maintenant, je suis en utilisant comme cette

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

Les choses est que le soumettre le formulaire montrera erreur de validation et je veux la mise au point et le défilement pour vous déplacer Là ? aidez s'il vous plaît?

Answer 1

Déplacez l'implémentation de la directive sur l'entrée pour pouvoir en faire directement référence. Pour désactiver le tir au début, définissez une propriété. Modifiez cette propriété directement dans le modèle lorsque le formulaire est soumis. Utilisez DoCheck dans la directive pour suivre la validité d'entrée et le feu le défilement et se concentrer:

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> 

Component

start = true; 

directive:

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

    @Input() scrollTo ; 


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

DEMO

---

ancienne réponse.

Vous regardez user.get (« email ») touché dans l'emballage qui est faux au début, la durée entière est supprimée et scrollTo est ignoré. Déplacer la directive à l'entrée réelle et faire des changements