I've encountered an issue while using Material UI and reactive forms. My application is functioning as expected, allowing users to login successfully. However, I'm receiving the TS2531 error in my terminal window, stating that the object may be 'null'. Below is a screenshot of the error message for reference, along with my login HTML template and component.
Here is the code snippet from my login.component.html:
<div class="example-container">
<div class="form-container">
<form [formGroup]="loginForm" (submit)="onSubmit()">
<mat-form-field class="form-field" appearance="outline">
<mat-label> E-mail
</mat-label>
<input matInput formControlName="email" required>
<mat-error *ngIf="loginForm.controls.email.touched && loginForm.controls.email.invalid">
<span *ngIf="loginForm.controls.email.errors.required">This field is mandatory.</span>
<span *ngIf="loginForm.controls.email.errors.pattern">This field is invalid.</span>
</mat-error>
</mat-form-field>
<mat-form-field class="form-field" appearance="outline">
<mat-label> Password
</mat-label>
<input matInput formControlName="password" type="password">
<mat-error *ngIf="loginForm.controls.password.touched && loginForm.controls.password.invalid">
<span *ngIf="loginForm.controls.password.errors.required">This field is mandatory.</span>
</mat-error>
</mat-form-field>
<button mat-raised-button color="primary" type="submit">Log In</button>
</form>
</div>
</div>
And here is the code snippet from my login.component.ts file:
import { Component, OnInit } from '@angular/core';
// Remaining content has been omitted for brevity.
Although my application is running smoothly, I am encountering the provided error in the terminal. Any assistance or guidance on resolving this issue would be greatly appreciated.