仅通过 7 位数字验证输入

Question

The user can enter only 7 figures.

If the user enters more than 7 figures, there is an error message -> "You need 7 digits"

For example, if the user enters this -> 12345678910

I retrieve correctly the error message

Here is the code

...
<input type="text" class="inputSignInAccess" [(ngModel)]="otp" >
 <div class="error" style="color: red; position: absolute; right: -430px; top: -210px">
  <div *ngIf="otp?.length > 7 ">You need 7 digits
</div> 

Now, if the user enters 3 figures, I have to retrieve the same error message. My problem is that, I get an error message before to enter a number. The problem is the value 0 in my condition?

<input type="text" class="inputSignInAccess" [(ngModel)]="otp" >
    <div class="error" style="color: red; position: absolute; right: -430px; top: -210px">
      <div *ngIf="otp?.length > 7 ">
          You need 7 digits
      </div> 
      
       <div *ngIf="otp?.length != 0 ">
        </div>

        <div *ngIf="otp?.length < 7 ">
              You need 7 digits
         </div> 
             
    </div>

Answer 1

You can use && with both condition:

<input type="text" class="inputSignInAccess" [(ngModel)]="otp" >
    <div class="error" style="color: red;">
     

        <div *ngIf="otp.length != 0 && otp?.length < 7 ">
              You need 7 digits
         </div> 
             
    </div>

Here is working sample.

Answer 2

Angular's way to achieve your requirements is to use validators.

<input #otpControl="ngModel" type="text" class="inputSignInAccess" [(ngModel)]="otp" minlength="7" maxlength="7" required>
<div *ngIf="otpControl.invalid" class="error" style="color: red; position: absolute; right: -430px; top: -210px">
    <div *ngIf="otpControl.errors?.required">Required</div>
    <div *ngIf="otpControl.errors?.minlength || otpControl.errors?.maxlength">You need 7 digits</div>
</div>