# Reactive Forms: Validation

**URL:** <https://forum.codewithmosh.com/t/reactive-forms-validation/12654>\
**Category:** Angular\
**Created:** [May 27, 2022, 2:13am UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654 "2022-05-27T02:13:37Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nth\_Mania](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nth_mania/32/3813_2.png) [@Nth\_Mania](https://forum.codewithmosh.com/u/Nth_Mania)\
**Post date:** [May 27, 2022, 2:13am UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/1 "2022-05-27T02:13:37Z")

</div>

ngIf="form.get(‘username’).touched

This gives me an error message: “Object is possibly ‘null’”

---

<div class="post-metadata">

**Author:** ![Nth\_Mania](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nth_mania/32/3813_2.png) [@Nth\_Mania](https://forum.codewithmosh.com/u/Nth_Mania)\
**Post date:** [May 27, 2022, 2:15am UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/2 "2022-05-27T02:15:12Z")

</div>

It does not like the “touched” portion of this code or the “invalid” portion. I get the same error for both.

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [May 27, 2022, 4:20am UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/4 "2022-05-27T04:20:36Z")

</div>

It looks like you must be using a more recent version of TypeScript / Angular which has probably opted you into strict null safety. In order to do this, you need to use the `?.` operator instead of simply using `.` which will handle the null safety for you:

```auto
<div *ngIf="form.get('username')?.touched"> ... </div>

```

---

<div class="post-metadata">

**Author:** ![Nth\_Mania](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nth_mania/32/3813_2.png) [@Nth\_Mania](https://forum.codewithmosh.com/u/Nth_Mania)\
**Post date:** [May 27, 2022, 3:49pm UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/5 "2022-05-27T15:49:58Z")

</div>

That fixed the problem… however I get the same issue when creating the specific error validators… So I used the ? operator on “username” and it fixes the issue with username. **errors** where errors is possibly null.

\*ngIf=“username?.errors.required”

However the required portion still throws an error… it will not let me add the ? operator on both elements… "username?.errors?.required

---

<div class="post-metadata">

**Author:** ![Nth\_Mania](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nth_mania/32/3813_2.png) [@Nth\_Mania](https://forum.codewithmosh.com/u/Nth_Mania)\
**Post date:** [May 27, 2022, 3:54pm UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/6 "2022-05-27T15:54:02Z")

</div>

I had this problem in Sec 7, with Template validators, as well but I skipped over it because i couldn’t solve the problem.

---

<div class="post-metadata">

**Author:** ![Nth\_Mania](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/nth_mania/32/3813_2.png) [@Nth\_Mania](https://forum.codewithmosh.com/u/Nth_Mania)\
**Post date:** [May 27, 2022, 8:11pm UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/7 "2022-05-27T20:11:31Z")

</div>

I am using:  
typescript 4.6.4  
angular cli 13.3.5  
node js 16.15.0  
npm 8.10.0

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [May 30, 2022, 3:48am UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/8 "2022-05-30T03:48:46Z")

</div>

In my IDE (VSCode) it gave me this helpful warning message which pointed me at what I needed to do:

> Property ‘required’ comes from an index signature, so it must be accessed with [‘required’].

Which means doing stuff like this:

```auto
<div *ngIf="username.errors?.['required']">...</div>

```

This actually matches what the Angular documentation says about [validating input in template-driven forms](https://angular.io/guide/form-validation#validating-input-in-template-driven-forms). According to some [Stackoverflow answers](https://stackoverflow.com/a/70446563), it looks like this behavior changed in Angular v13 (which you are using).

---

<div class="post-metadata">

**Author:** ![Clara.pisuc](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/clara.pisuc/32/5658_2.png) [@Clara.pisuc](https://forum.codewithmosh.com/u/Clara.pisuc)\
**Post date:** [February 27, 2023, 7:20pm UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/9 "2023-02-27T19:20:30Z")

</div>

I did everything you said, but I still get the “Object is possibly null” error. Here is my code:

```auto
  <div *ngIf="username?.touched && username?.invalid" class="alert alert-danger">
        <div *ngIf="username.errors?.['required']"> Username is required </div>
        <div *ngIf="username.errors?.['minlength']">Username should be minimum 3 characters</div>
        <div *ngIf="username.errors?.['cannotContainSpace']"> Username should not have any spaces</div>
      </div>

```

---

<div class="post-metadata">

**Author:** ![ImekEngineer](https://avatars.discourse-cdn.com/v4/letter/i/a8b319/32.png) [@ImekEngineer](https://forum.codewithmosh.com/u/ImekEngineer)\
**Post date:** [June 25, 2024, 9:55pm UTC](https://forum.codewithmosh.com/t/reactive-forms-validation/12654/10 "2024-06-25T21:55:11Z")

</div>

This worked for me…hope this helps:  
“\<div \*ngIf=“username?.errors?.[‘required’]”\>Username is required.”