Angular 8: Email Validator msg not working

Question

In my form I have two error msgs, one for when the field is left empty, at which point the message says "Required" and another when the email is invalid where the message is "Invalid".

The first seems to be working just fine, when the field is left empty the messgae shows! The second doesn't work, meaning, it validates the email but the message doesn't show when the email is invalid! I think the problem lies with this line of code:

                <span class="form-error" *ngIf="(email.dirty || email.touched) && email.invalid && email.errors.invalidEmail">
                Value has to be a valid email address. Eg: abc@abc.com
            </span>

Following is the rest of the form and the ts file:

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'app-contact',
    templateUrl: './contact.component.html',
    styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {
    contactForm: FormGroup;
    constructor() {
        this.contactForm = this.createFormGroup();
    }

    ngOnInit() {}

    createFormGroup() {
        return new FormGroup({
            name: new FormControl('', [Validators.required]),
            email: new FormControl('', [Validators.required, Validators.email]),
            phone: new FormControl(''),
            msg: new FormControl('', [Validators.required])
        });
    }

    onSubmit() {
        // ...
    }

    get name() {
        return this.contactForm.get('name');
    }

    get email() {
        return this.contactForm.get('email');
    }

    get msg() {
        return this.contactForm.get('msg');
    }

}

        <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
            <div class="field-wrapper">
                <input type="text" name="name" formControlName="name"/>
                <span class="label">Name*</span>
                <span class="form-error" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
                    Please enter your Name.
                </span>
            </div>
            <div class="field-wrapper">
                <input type="email" name="email" formControlName="email"/>
                <span class="label">E-mail*</span>
                <span class="form-error" *ngIf="(email.dirty || email.touched) && email.invalid && email.errors.required">
                    Please enter your E-mail address. 
                </span>
                <span class="form-error" *ngIf="(email.dirty || email.touched) && email.invalid && email.errors.invalidEmail">
                Value has to be a valid email address. Eg: abc@abc.com
            </span>
            </div>
            <div class="field-wrapper">
                <input type="text" name="phonenumber" formControlName="phone"/>
                <span class="label">Phone Number</span>
            </div>
            <div class="field-wrapper">
                <textarea formControlName="msg"></textarea>
                <span class="label">Say Hi :)</span>
                <span class="form-error" *ngIf="(msg.dirty || msg.touched) && msg.invalid && msg.errors.required">
                    Tell us what you are thinking! Don't be shy! ;)
                </span>
            </div>
            <!-- Make button red when all fields are valid -->
            <button class="contact submit" type="submit" [disabled]="!contactForm.valid">
                <i class="far fa-paper-plane fa-2x"></i>
            </button>
        </form>

Answer 1

do this:

<span class="form-error" *ngIf="(email.dirty || email.touched) && email.errors?.email">

email is the error returned by the inbuilt email validator. also you can skip the double check by using the ? operator which makes it null safe