Angular 4 validation is showing when the page load's - html

Question

i'm working on angular 4 form and set some validations on the input field but the validation is show when the page load's but i want the validation when the form is submitted or the email pattern is not valid.
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"
[class.error]="!myForm.valid && myForm.touched">
<div class="field" [class.error]="!email.valid && email.touched">
<label for="email">Email</label>
<input type="email" id="email" name="email" [formControl]="email">
<div *ngIf="!email.valid"
class="ui error message">Email is invalid</div>
<div *ngIf="email.hasError('required')"
class="ui error message">Email is required</div>
</div>
<div *ngIf="!myForm.valid"
class="ui error message">Form is invalid</div>
<button type="submit">login</button>
</form>
Typescript code:
function EmailValidator(control: FormControl): { [s: string]: boolean } {
if (!control.value.match('^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$'))
{
return {invalidEmail: true};
}
}
#Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
myForm: FormGroup;
email: AbstractControl;
constructor(fb:FormBuilder) {
this.myForm = fb.group({
'Email': ['', Validators.compose([
Validators.required, EmailValidator])
]
});
this.email = this.myForm.controls['Email'];
}
onSubmit(form: string): void {
console.log('you submitted value:', form);
}
}

Answer 1

you can use
<div
*ngIf="myForm.get('email').hasErrors('required') &&
myForm.get('email').touched">
Email is required
</div>
And adapt hasError to your validation