Getting Object is possibly 'null'. in Angular template file

This error comes when the flag --strictNullChecks is enabled and to solve it, it's needed to check if one object is not null before accessing its properties.

For example, in this case:

<button (click)="form.get('myControl').enable()"></button>

we first need to check that the form object is not null, before calling get(...) on it:

<button *ngIf="form" (click)="form.get('myControl').enable()"></button>

alternatively, one can wrap more html elements in one <ng-container> to avoid repetition of ngIfs:

<ng-container *ngIf="form">
  <form [formGroup]="form">
    <timepicker [formControlName]="'myControl'"></timepicker>
  </form>

  <br>
  <button class="btn btn-succes" (click)="form.get('myControl').enable()">Enable Control</button>
  <button class="btn btn-warning" (click)="form.get('myControl').disable()">Disable Control</button>
  <br><br>

  <pre class="alert alert-info">Time is: {{ form.get('myControl').value }}</pre>
</ng-container>

Just write '?' after the get. Like this :

form.get('myControl')?.value

the error should disappear

"Object is possibly null" is a compile time error, which helps us to identify the null objects before run time. There are several different ways to handle this message, depends on your needs. To summarize, you have three options :

1. Disable strict mode (not recommended):

From the Angular v10 above, typescript strict mode enabled by default in Angular applications. To change it, in Angular application directory, Open tsconfig.json file and under compilerOptions you will see "strict": true option.

2. Using (!) not null assertion operator : If you are absolutely sure that an object can never be null.

3. Using (?) optional chaining operator : If you are not sure whether the object is null or not.

Easiest way to handle this scenario is by making of optional chaining of Javascript in the template code, this will first check whether the object is null or undefined and then gives out undefined instead of throwing an error if object is null. you can read more about it the MDN web docs link provided below:

Optional chaining

here is the code snippet

(click)="form.get('myControl')?.enable()"

I highly recommend not disabling the --strictNullChecks flag as it will help in avoiding unexpected runtime errors, as explained in TS docs linked below:

strict nullcheck in TS

FWIW, you could also encapsulate the form-control access in a getter, together with an explicit type conversion:

get myControl() {return this.form.get('myControl') as FormControl;}

This would avoid the error, plus it makes the template DRYer.

on tsconfig.json I set the strictTemplates to false

  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": false
  }