CODEWITHSUNDEEP
angulartypescript
manikandan
manikandan

Reputation: 815

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.

Upvotes: 30

Views: 79291

Answers (12)

Asad Ashraf
Asad Ashraf

Reputation: 1645

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']"

Upvotes: 0

Eduardo Lillo
Eduardo Lillo

Reputation: 11

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

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

Upvotes: 1

Devner
Devner

Reputation: 7255

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.

Upvotes: 2

Varun Vaidya
Varun Vaidya

Reputation: 111

For angular version ^14.0, this can be used:

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

Upvotes: 11

Md Samrat Akbor
Md Samrat Akbor

Reputation: 75

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

Upvotes: 2

Marvi Jokhio
Marvi Jokhio

Reputation: 1

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>

Upvotes: 0

Petar Kobakov
Petar Kobakov

Reputation: 41

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

Upvotes: 4

Nabullah Ansari
Nabullah Ansari

Reputation: 1

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

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

Upvotes: 0

Saswati Choudhury
Saswati Choudhury

Reputation: 11

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

Upvotes: 1

Sab Rina Balti
Sab Rina Balti

Reputation: 1

error TS2531: Object is possibly 'null'.

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

Upvotes: -1

Andy Essien
Andy Essien

Reputation: 131

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"

Upvotes: 9

mbojko
mbojko

Reputation: 14699

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

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

Upvotes: 65

Related Questions