CODEWITHSUNDEEP
angular
elodie
elodie

Reputation: 109

Why my "<div * ngIf" erases my items from my <li>

I currently have a problem that I have never had.

With this code below my texts appear correctly.

enter image description here

<li data-help="4">
<span class="numberIconPage2" style="position: absolute; top: -238px">4</span>
    <p class="titrePage2" style="position: absolute; top: -238px;">
        {{'1609-1611' | t }}
   </p>
   <p class="step1 help-1" >
      <input type="text" class="inputSignInAccess" [(ngModel)]="otp">
                  
   </p>
</li>

When I add this condition

<div *ngIf="otp.length > 2 ">
    Max 2 characters long.
</div>

My texts have disappeared.

enter image description here

However, if I enter a figure in the input, the elements appear correctly.

enter image description here

I would like the text to display even if the user does not enter any value.

I don't understand why the condition is confusing my HTML code?

<li data-help="4">
 <span class="numberIconPage2" style="position: absolute; top: -238px">4</span>
    <p class="titlePage2" style="position: absolute; top: -238px;">
         {{'1609-1611' | t }}
    </p>
     
    <input type="text" class="inputSignInAccess" [(ngModel)]="otp">
       <div *ngIf="otp.length > 2 ">
          Max 2 characters long.
       </div> 
       
</li>

Thank you very much for your answer.

Upvotes: 0

Views: 60

Answers (1)

mbojko
mbojko

Reputation: 14679

My guess is otp is undefined (or possibly null), you are getting "Cannot read property length of undefined" in the console, and this error messes up rendering the template. The fix would be *ngIf="otp?.length > 2", or initializing otp to an empty string.

Was I right?

Upvotes: 2

Related Questions