Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'includes')

I am new to angular and was learning how to create custom directives. I was handling some email validations in email-validation.directive.ts and found that i am geting this error

email-validation.directive.ts

import { Directive } from '@angular/core';
import {
AbstractControl,
NG_VALIDATORS,
ValidationErrors,
Validator,
} from '@angular/forms';
@Directive({
selector: '[appEmailValidation]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: EmailValidationDirective,
multi: true,
},
],
})
export class EmailValidationDirective implements Validator {
count = 0;
validate(control: AbstractControl<any, any>): ValidationErrors | null {
const value = control.value as string;
if (!value.includes('@') && !value.includes('.com')) {
return {
invalidEmail: true,
};
}
return null;
}
constructor() {}
}

Here is my code and condition of my directive. I want to check if the email contains @ and .com keywords and if id doesn't I want to set invalidEmail as true
Main Component Code

register.component.html

<form #registerForm="ngForm" class="form-container" (ngSubmit)="postData(registerForm)">
<mat-grid-list cols="1" rowHeight="100vh">
<mat-grid-tile>
<div class="example-container">
<mat-form-field hintLabel="Max 20 characters" appearance="fill" class="width-50">
<mat-label>First Name</mat-label>
<input #fname minlength="3" maxlength="20" required [(ngModel)]="ad.firstName" type="text" name="firstName"
matInput placeholder="Enter Your Firstname">
<mat-hint align="end">{{fname.value.length}}/20</mat-hint>
</mat-form-field>
<mat-form-field hintLabel="Max 20 characters" appearance="fill" class="width-50 ml-2">
<mat-label>Last name</mat-label>
<input #lname minlength="3" maxlength="20" required [(ngModel)]="ad.lastName" name="lastName" type="text"
matInput placeholder="Enter your Lastname">
<mat-hint align="end">{{lname.value.length}}/20</mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="fill" class="width-100">
<mat-label>City</mat-label>
<input minlength="3" maxlength="20" required [(ngModel)]="ad.city" name="city" type="text" matInput
placeholder="Enter your City">
</mat-form-field>
<br>
<mat-form-field appearance="fill" class="width-100">
<mat-label>Age</mat-label>
<input min="1" max="100" required [(ngModel)]="ad.age" name="age" type="number" matInput placeholder="Age">
</mat-form-field>
<br>
<mat-form-field appearance="fill" class="width-100">
<mat-label>Username</mat-label>
<input appEmailValidation #user="ngModel" required [(ngModel)]="ad.username" name="username" matInput
placeholder="Enter your username">
<mat-hint color="warn"></mat-hint>
</mat-form-field>
<br>
<mat-form-field appearance="fill" class="width-100">
<mat-label>Enter password</mat-label>
<input required [(ngModel)]="ad.password" name="password" matInput [type]=" hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)=" hide=!hide" [attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<button [disabled]="registerForm.invalid" mat-raised-button color="primary">Submit</button>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
{{user.errors | json}}

When I am running the code i am getting this error
Cannot read properties of null

simply edit this condition:

if (!value || ( !value.includes('@') && !value.includes('.com'))) {
return {
invalidEmail: true,
};
}

Because in your case value is null and I believe that null is also an invalid value for email.