有角度的两个验证同时触发答案

【问题标题】：angular two validations fire in the same time有角度的两个验证同时触发
【发布时间】：2021-11-09 10:24:20
【问题描述】：

我使用以下代码验证我的角度形式

       <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>

当我在文本框中输入字母时，会同时触发两个验证。请检查下图

我如何一一加载我的验证......谢谢

【问题讨论】：

您可以同时显示两条消息（可能是在彼此下方），或者您可以调整一个错误的条件，使其在另一个可见时不显示。

标签： javascript angular validation

【解决方案1】：

这是正确的行为，因为您提供的文本不是有效数字且少于 12 个字符。

【讨论】：

【解决方案2】：

使用NgSwitch而不是ngIf和一些返回formControl.errors对象第一个键的函数调用我认为它可以帮助

【讨论】：