angular two validations fire in the same time-CodePudding

I validate my angular form using below code

       <div class="form-group">
                <input type="text" minlength="12" maxlength="12" name="accountno" #accountNo="ngModel" required class="form-control"  pattern="^[0-9]*$"
                [(ngModel)]="registerUser.accountNo"    [class.is-invalid]="accountNo.invalid && accountNo.touched"
                placeholder="Account No.">
                <div [class.d-none]="accountNo.valid || accountNo.untouched">
                    <small *ngIf="accountNo.errors?.required" class="text-danger">Account No. is required</small>
                    <small *ngIf="accountNo.hasError('pattern')" class="text-danger">Accout No. should be 12 numbers</small>
                    <small *ngIf="accountNo.hasError('minlength')" class="text-danger">Accout No. must be at least 12 Numbers.</small>
                </div>
            
            </div>

When I typing letters in the textbox, two validations fire in same time. please check below image

how i load my validations one by one.. thanks

CodePudding user response：

This is the correct behavior, since the text you provided is not a valid number and it has less than 12 characters.

CodePudding user response：

Use NgSwitch instead of ngIf and some function call that returns the first key of formControl.errors object I think it can help