htmlangulartextareacontent-length

How to check length which can be null

I would like to check out my textarea length. This is my code:


<div class="row d-flex justify-content-center textarea-wrapper">
    <p class="mb-1">Additional information to order:</p>
      <textarea class=" additionalInformation justify-content-center" name="additionalInformation"
      value="{{additionalInformation}}" formControlName="additionalInformation" placeholder="text..."
           [maxlength]="maxCharsOfArea"></textarea>

       <span *ngIf="signupForm.controls['additionalInformation'].value.length">
     {{signupForm.controls['additionalInformation'].value.length}} /{{maxCharsOfArea}}</span>
</div>

View:
enter image description here

On Load my page I get error Cannot read properties of null (reading 'length')

After added any text, everything works perfect.
enter image description here

What Can I do with this in intialization?

Solution

  • In this case you should be able to use the safe navigation operator ?. to avoid the error you are receiving.

    {{signupForm.controls['additionalInformation'].value?.length}} /{{maxCharsOfArea}}

    https://docs.angular.lat/guide/template-expression-operators#safe-navigation-operator

    If you expect that the value remains null after initialization, you could also add a nullish coalescing operator to default your value to 0

    {{signupForm.controls['additionalInformation'].value?.length ?? 0}} /{{maxCharsOfArea}}