title: In angular 11 material UI I am getting error TS2531: Object is possibly 'null' in my html template
body: <p>I am using material UI and reactive form. My application is running properly and I am able to login but in my terminal window i am getting error TS2531: Object is possibly 'null'. I have attache the error screen shot below for the reference and also my login html template and component.</p>
  <p>My login.component.html code is</p>
  <pre><code>&lt;div class=&quot;example-container&quot;&gt;
    &lt;div class=&quot;form-container&quot;&gt;
      &lt;form [formGroup]=&quot;loginForm&quot; (submit)=&quot;onSubmit()&quot;&gt;
        &lt;mat-form-field class=&quot;form-field&quot; appearance=&quot;outline&quot;&gt;
          &lt;mat-label&gt; E-mail
          &lt;/mat-label&gt;
          &lt;input matInput formControlName=&quot;email&quot; required&gt;
          &lt;mat-error *ngIf=&quot;loginForm.controls.email.touched &amp;&amp; loginForm.controls.email.invalid&quot;&gt;
            &lt;span *ngIf=&quot;loginForm.controls.email.errors.required&quot;&gt;This field is mandatory.&lt;/span&gt;
            &lt;span *ngIf=&quot;loginForm.controls.email.errors.pattern&quot;&gt;This field is invalid.&lt;/span&gt;
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
        &lt;mat-form-field class=&quot;form-field&quot; appearance=&quot;outline&quot;&gt;
          &lt;mat-label&gt; Password
          &lt;/mat-label&gt;
          &lt;input matInput formControlName=&quot;password&quot; type=&quot;password&quot;&gt;
          &lt;mat-error *ngIf=&quot;loginForm.controls.password.touched &amp;&amp; loginForm.controls.password.invalid&quot;&gt;
            &lt;span *ngIf=&quot;loginForm.controls.password.errors.required&quot;&gt;This field is mandatory.&lt;/span&gt;
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
        &lt;button mat-raised-button color=&quot;primary&quot; type=&quot;submit&quot;&gt;Log In&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My login.component.ts code is</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { ActivatedRoute, Router } from '@angular/router';
  import { first } from 'rxjs/operators';
  import { NotificationService } from 'src/app/_services';
  import { AuthService } from '../auth.service';
  import { Login } from '../user';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    loginForm!: FormGroup;
    loading = false;
    submitted = false;
    error = '';
    emailRegx = /^(([^&lt;&gt;+()\[\]\\.,;:\s@&quot;-#$%&amp;=]+(\.[^&lt;&gt;()\[\]\\.,;:\s@&quot;]+)*)|(&quot;.+&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,3}))$/;
  
  
    constructor(
      private formBuilder: FormBuilder,
      private route: ActivatedRoute,
      private authService: AuthService,
      private router: Router,
      private notifyService: NotificationService
    ) {
    }
  
    ngOnInit() {
      this.loginForm = this.formBuilder.group({
        email: [&quot;&quot;, [Validators.required, Validators.pattern(this.emailRegx)]],
        password: [&quot;&quot;, Validators.required]
      });
    }
  
    get f() { return this.loginForm.controls; }
  
    onSubmit() {
  
      this.submitted = true;
  
      if (this.loginForm.invalid) {
        return;
      }
  
      this.loading = true;
  
      let login: Login = { Email: this.f.email.value, Password: this.f.password.value }
  
      this.authService.signIn(login)
        .pipe(first())
        .subscribe({
          next: () =&gt; {
            this.router.navigateByUrl('/landing');
          },
          error: error =&gt; {
            this.error = error;
            this.loading = false;
            this.notifyService.showError(this.error, this.error)
          }
        });
    }
  }
  </code></pre>
  <p>My application is running properly but in terminal I am getting below error</p>
  <p><a href="https://i.stack.imgur.com/Zthy2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zthy2.png" alt="Error" /></a></p>
  <p>can someone please help</p>