Why is a Angular Form Validated even before i press the Submit button? - forms

Question

I have a Reactive Angular Form. When the page Loads the form is already checked for the errors.
I am trying to use a scroll to error directive in order to scroll and focus on the error div but the form never goes there it is already validated.
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();
}
}
}
This is where i am checking the error but it is already checked and if i put the scrollTo outside it scrolls to at first .
<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>
Update
Now i am using it like this
<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>
The things is that on submit the form will show validation error and i want the focus and the scroll to move there ? please help ?

Answer 1

Move the directive implementation to the input so you can have the direct reference to it. To deactivate the firing at the start, set a property. Change that property directly in the template when form is submitted. Use DoCheck in the directive to track the input validity and fire the scrolling and focus:
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
Old answer:
You are checking user.get('email').touched in the wrapper which is false at the start, the whole span is removed and scrollTo is ignored. Move the directive to the actual input and make changes