Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error TS2531 object is possibly null in angular reactive forms

Hi i have tried to do reactive form validation in angular 11 but its showing following error in terminal.

error TS2531 object is possibly null.

my code in signup.component.ts

import {FormGroup, FormControl, Validators} from '@angular/forms';
        
form =  new FormGroup({
    firstName: new FormControl('',Validators.required)
})
    
get f()
{
    return this.form.controls;
}

in signup.component.html

<form role="form" [formGroup]="form">
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" formControlName="firstName" [ngClass]="{'is-invalid':form.get('firstName').touched && form.get('firstName').invalid}">
        <div *ngIf="f.firstName.touched && f.firstName.invalid">
            <small class="text-danger" *ngIf="f.firstName.errors.required">
                Name is required!
            </small>
            
        </div>
    </div>
</form>

when i run its showing error in

<small class="text-danger" *ngIf="f.firstName.errors.required"> Name is required!

error TS2531 object is possibly null.

like image 749
manikandan Avatar asked Jan 30 '21 10:01

manikandan


People also ask

How do you fix error object is possibly null?

The "Object is possibly 'null'" error occurs when we try to access a property on an object that may have a value of null . To solve the error, use the optional chaining operator or a type guard to make sure the reference is not null before accessing properties.

Can't bind to FormGroup since it isn't a known property?

What Does This Error Mean? Angular is trying to tell us that it doesn't know about the formGroup directive on the <form> element in your component. This usually happens when the wrong forms module is imported, the right module is imported in the wrong place or the ReactiveFormsModule is just not imported at all.


Video Answer


4 Answers

latest version of angular requires you Use the safe navigation operator inside your first if check as well eg.

*ngIf="f.firstName?.touched && f.firstName?.invalid"

then finally

*ngIf="f.firstName.errors?.required"
like image 176
Andy Essien Avatar answered Oct 19 '22 13:10

Andy Essien


The object f.firstName.errors can be null. Use the safe navigation operator ?:

*ngIf="f.firstName.errors?.required"
like image 48
mbojko Avatar answered Oct 19 '22 12:10

mbojko


<div *ngIf="f.firstName?.touched && f.firstName?.invalid">
<small class="text-danger" *ngIf="f.firstName?.errors?.['required']">

Doing validation in reactive form Angular 13 requires to add optional chaining operator (the question mark '?') to the FormControl object (f.firstName) and its errors property.

like image 2
Petar Kobakov Avatar answered Oct 19 '22 12:10

Petar Kobakov


<div *ngIf="postForm.get('title')?.touched && !postForm.get('title')?.valid"> <div *ngIf="postForm.get('title')?.errors?.['required']" class="alert alert-warning"> Title is required </div> </div> angular version is 13.3.0 5

The Object is possibly 'null' error can happen due to strict type checking and can be solved in 2 ways:

  • Either assert that you are absolutely sure that can never be null, by using the ! (not null assertion operator)
  • Use the ? (optional chaining operator) to stop an eventual error from happening in case the object is indeed null

So you can replace the if statement with postForm.get('title')?.touched && !postForm.get('title')?.valid and it should work.

like image 1
Md Somrat Akbor Avatar answered Oct 19 '22 12:10

Md Somrat Akbor