Error TS2531 object is possibly null in angular reactive forms

Question

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.

mbojko · Accepted Answer · 2021-01-30 10:12:31Z

65

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

*ngIf="f.firstName.errors?.required"

answered Jan 30, 2021 at 10:12

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

developer033 Over a year ago

Or f.firstName.hasError('required') or f.hasError('required', 'firstName').

d0rf47 Over a year ago

wow this must be a new addition to the latest angular I never had this issue in the past years! thanks for pointing this out!

Flash Noob Over a year ago

@d0rf47 this is because u op have strict mode on.

sdlins Over a year ago

@developer033 your comment should be an own answer! I would upvote too! Thank you!

starball · Accepted Answer · 2022-10-03 05:55:46Z

11

For angular version ^14.0, this can be used:

form.controls['firstName'].errors?.['required']
and 
form.controls['firstName'].errors?.['minlength']

edited Oct 3, 2022 at 5:55

starball♦

59.6k53 gold badges315 silver badges1k bronze badges

answered Oct 1, 2022 at 15:39

Varun Vaidya

1111 silver badge3 bronze badges

Comments

Vítor França · Accepted Answer · 2021-11-28 02:27:43Z

9

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"

edited Nov 28, 2021 at 2:27

Vítor França

7579 silver badges21 bronze badges

answered Nov 26, 2021 at 23:56

Andy Essien

1311 silver badge2 bronze badges

1 Comment

plasmy Over a year ago

For some reason in the required one I had to put the question mark (?) in firstName and in errors for it to work

Petar Kobakov · Accepted Answer · 2022-04-19 21:29:10Z

4

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

edited Apr 19, 2022 at 21:29

answered Apr 19, 2022 at 13:52

Petar Kobakov

412 bronze badges

1 Comment

Tyler2P Over a year ago

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?

Md Samrat Akbor · Accepted Answer · 2022-08-11 07:00:25Z

2

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

answered Aug 11, 2022 at 7:00

Md Samrat Akbor

754 bronze badges

Comments

Devner · Accepted Answer · 2023-04-02 20:28:27Z

2

This is what worked for me in 2023:

In tsconfig.json, I just changed "strict": true, to "strict": false, and restarted the server.

The above fixed it for me.

answered Apr 2, 2023 at 20:28

Devner

7,34711 gold badges70 silver badges110 bronze badges

2 Comments

Asad Ashraf Over a year ago

This is not something recommended though.

John Spiteri Over a year ago

The word "fixed" should be replaced with "workaround"...

Saswati Choudhury · Accepted Answer · 2022-02-12 11:21:27Z

1

We can us form.controls['firstName] and form.controls['firstName].errors?.length

answered Feb 12, 2022 at 11:21

Saswati Choudhury

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Eduardo Lillo · Accepted Answer · 2023-04-09 23:54:19Z

1

// Property 'requiered' comes from an index signature, so it must be accessed with ['requiered'].ngtsc(4111)

solutions: <div *ngIf="f?.errors?.['requiered']">

answered Apr 9, 2023 at 23:54

Eduardo Lillo

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

ahuemmer · Accepted Answer · 2022-04-04 15:05:59Z

0

Latest Angular Syntax require safe navigation operator ? in brackets as shown below:

*ngIf="f['firstname'].errors?['required']"

edited Apr 4, 2022 at 15:05

ahuemmer

2,12717 gold badges30 silver badges38 bronze badges

answered Mar 31, 2022 at 11:58

Nabullah Ansari

1

Comments

Marvi Jokhio · Accepted Answer · 2022-07-31 23:56:48Z

0

Validation for a required field

<input type="text" class="form-control form-control-user" formControlName="firstname">
<div class="text-danger" *ngIf="(f['firstname'].touched || submitted) && f['firstname'].errors?.['required']"> First Name is required!</div>

answered Jul 31, 2022 at 23:56

Marvi Jokhio

11 bronze badge

Comments

Asad Ashraf · Accepted Answer · 2024-03-29 22:43:45Z

0

You can also use 'non-null assertion operator' which is used if the typescript compiler complains about a value being null or undefined , you can use the ! operator to assert that the said value is not null or undefined .

*ngIf="cardForm.controls.name.errors!['required']"

answered Mar 29, 2024 at 22:43

Asad Ashraf

1,71511 silver badges20 bronze badges

Comments

Sab Rina Balti · Accepted Answer · 2021-12-28 00:44:55Z

-1

error TS2531: Object is possibly 'null'.

4 <div class="alert alert-danger" *ngIf="myForm.get('fname').touched">

answered Dec 28, 2021 at 0:44

Sab Rina Balti

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Error TS2531 object is possibly null in angular reactive forms

12 Answers 12

4 Comments

Comments

1 Comment

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

4 Comments

Comments

1 Comment

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related