Solved - object is possibly 'null angular reactive form validation

By Hardik Savani June 9, 2021 Category : Angular

This article is focused on object is possibly 'null angular reactive form validation. if you want to see example of object is possibly 'null'. angular reactive form then you are a right place. This tutorial will give you simple example of object is possibly 'null'. errors validation angular. i explained simply about object is possibly 'null' angular validation.

it will also work this solution with angular 7, angular 8, angular 9, angular 10, angular 11 and angular 12 version.

few days ago i was working on my angular 12 reactive form validation example and i got following error:

"Object is possibly 'null'.

<div *ngIf="f.email.errors.email">Please, enter valid email address.</div>

"

as bellow screenshot:

my html view code was as like bellow:

<h1>Angular 12 Reactive Forms Validation Example - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div class="form-group">

<label for="name">Name</label>

<input

formControlName="name"

id="name"

type="text"

class="form-control">

<div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">

<div *ngIf="f.name.errors.required">Name is required.</div>

<div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>

</div>

</div>

<div class="form-group">

<label for="email">Email</label>

<input

formControlName="email"

id="email"

type="text"

class="form-control">

<div *ngIf="f.email.touched && f.email.invalid" class="alert alert-danger">

<div *ngIf="f.email.errors.required">Email is required.</div>

<div *ngIf="f.email.errors.email">Please, enter valid email address.</div>

</div>

</div>

<button class="btn btn-primary" type="submit">Submit</button>

</form>

Solution 1:

<h1>Angular 12 Reactive Forms Validation Example - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div class="form-group">

<label for="name">Name</label>

<input

formControlName="name"

id="name"

type="text"

class="form-control">

<div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">

<div *ngIf="f.name.errors?.required">Name is required.</div>

<div *ngIf="f.name.errors?.minlength">Name should be 3 character.</div>

</div>

</div>

<div class="form-group">

<label for="email">Email</label>

<input

formControlName="email"

id="email"

type="text"

class="form-control">

<div *ngIf="f.email.touched && f.email.invalid" class="alert alert-danger">

<div *ngIf="f.email.errors?.required">Email is required.</div>

<div *ngIf="f.email.errors?.email">Please, enter valid email address.</div>

</div>

</div>

<button class="btn btn-primary" type="submit">Submit</button>

</form>

Solution 2:

<h1>Angular 12 Reactive Forms Validation Example - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div class="form-group">

<label for="name">Name</label>

<input

formControlName="name"

id="name"

type="text"

class="form-control">

<div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">

<div *ngIf="f.name.errors && f.name.errors.required">Name is required.</div>

<div *ngIf="f.name.errors && f.name.errors.minlength">Name should be 3 character.</div>

</div>

</div>

<div class="form-group">

<label for="email">Email</label>

<input

formControlName="email"

id="email"

type="text"

class="form-control">

<div *ngIf="f.email.touched && f.email.invalid" class="alert alert-danger">

<div *ngIf="f.email.errors && f.email.errors.required">Email is required.</div>

<div *ngIf="f.email.errors && f.email.errors.email">Please, enter valid email address.</div>

</div>

</div>

<button class="btn btn-primary" type="submit">Submit</button>

</form>

i hope it can help you...

Tags :