Angular Object is possibly 'null'. Error at <span *ngIf="checkoutForm.get('emailAddr').hasError('required')">Enter email address</span> - angular11

Question

Hi I am new to Angular 11 can anyone please help me with this error -
This is my code.
checkout.component.html
<h3>Checkout forms - Using Reactive forms</h3>
<div class="container">
<form [formGroup]="checkoutForm" (ngSubmit)="postData();">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" name="emailAddressField" formControlName="emailAddr">
<span *ngIf="checkoutForm.get('emailAddr').hasError('required')">Enter email address</span>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Quantity</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="passwordField" formControlName="quantity">
<small id="emailHelp" class="form-text text-muted">Enter Quantity</small>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" name="termsField" formControlName="terms">
<label class="form-check-label" for="exampleCheck1">Agree to Terms</label>
</div>
<br>
<button type="submit" class="btn btn-primary" [disabled]="!checkoutForm.valid">Checkout</button>
</form>
</div>
I am getting error as Error at <span *ngIf="checkoutForm.get('emailAddr').hasError('required')">Enter email address
checkout.component.ts
import { Component, Input, OnInit } from '#angular/core';
import { FormGroup, FormControl, FormBuilder,Validators} from '#angular/forms';
#Component({
selector: 'app-checkout',
templateUrl: './checkout.component.html',
styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {
checkoutForm:FormGroup;
constructor(private formBuilder:FormBuilder) {
this.checkoutForm = formBuilder.group({
emailAddr: ['',Validators.required],
quantity: ['',Validators.required],
terms: ['',Validators.requiredTrue]
});
}
ngOnInit(): void {
}
postData(){
console.log(this.checkoutForm);
}
}

Answer 1

Instead of using
<span *ngIf="checkoutForm.get('emailAddr').hasError('required')">Enter email address</span>
Try
<span *ngIf="checkoutForm.get('emailAddr')?.hasError('required')">Enter email address</span>
i have tested this code on my computer maybe it will also help you to resolve your compilation error.

Answer 2

You can use *ngIf="cadastroForm.get('username')?.errors">.
You have to use the ?.