CODEWITHSUNDEEP
angulartypescriptangular-template
Francesco Borzi
Francesco Borzi

Reputation: 61894

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

In my Angular app, I'm getting the following error:

Object is possibly 'null'.

The problem is that I'm getting this error not because of some typescript code, but because of this html template:

  <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>

Upvotes: 7

Views: 17283

Answers (6)

Suriya Ganesh
Suriya Ganesh

Reputation: 85

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

Upvotes: 1

Kelvin Lois
Kelvin Lois

Reputation: 121

"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.

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

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

Upvotes: 2

user21234192
user21234192

Reputation: 53

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

form.get('myControl')?.value

the error should disappear

Upvotes: 2

Clyde Santos
Clyde Santos

Reputation: 373

on tsconfig.json I set the strictTemplates to false

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

Upvotes: 0

pointyhat
pointyhat

Reputation: 596

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.

Upvotes: 0

Francesco Borzi
Francesco Borzi

Reputation: 61894

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>

Upvotes: 9

Related Questions