Object is possibly 'null' in Angular Form validation

Question

I am doing a validation on a form to check if a number input is greater than a certain number. I tried this answer, but I am still getting the same error.

But in am getting the following error:

error TS2531: Object is possibly 'null'.
 <small style="color: red;" [hidden]="myForm.get('checkAmount').hasError?'maxlength'">
                                                                ~~~~~~~~

  src/app/withdraw/withdraw.component.ts:10:16
    10   templateUrl: './withdraw.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component WithdrawComponent.

Here is my code:

<form [formGroup]="myForm" class="space" method="POST" autocomplete="off">
    <input type="text" name="amount" size="230" placeholder="Amount To Withdraw" 
    formControlName="checkAmount"
    [(ngModel)]="model.Balance"
    maxlength=50
    >
    <small style="color: red;" [hidden]="myForm.get('checkAmount').hasError?'maxlength'">
        The value should not exceed the balance
    </small>
</form>

myForm?.get('checkAmount')?.hasError?.'maxlength'"

eko
– eko

2021-05-23 14:18:40 +00:00
Commented May 23, 2021 at 14:18 — eko
– eko, Commented May 23, 2021 at 14:18

eko · Accepted Answer · 2021-05-23 14:19:29Z

5

You can put the ? operator to every chaining to be safe:

[hidden]="myForm?.get('checkAmount')?.hasError('maxlength')"

answered May 23, 2021 at 14:19

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

5 Comments

Ridwan Bhugaloo Over a year ago

It has compiled successfully, but it is displaying the <small> data even before I fill in the form.

eko Over a year ago

Well before you fill the form you don't have the maxlength error, right? Hence, that evaluates to false and hidden="false" would indeed display the error. You can/should revert the condition or use an *ngIf instead of [hidden]

Ridwan Bhugaloo Over a year ago

Before filling the form, it is already displaying "The value should not exceed the balance". I will try the *ngIf

Ridwan Bhugaloo Over a year ago

How do I revert the condition?

eko Over a year ago

!(myForm?.get('checkAmount')?.hasError('maxlength'))

dev_101 · Accepted Answer · 2021-05-23 14:16:28Z

0

try this

[hidden]="myForm.get('checkAmount').errors?.maxlength"

answered May 23, 2021 at 14:16

dev_101

3311 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Object is possibly 'null' in Angular Form validation

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related