使用 ngif 进行角度形式验证

如何解决使用 ngif 进行角度形式验证

有一个带有用户名文本框的表单。尝试添加一些验证。

当使用简单形式时——像这样的单个错误行它工作正常

<div class="col-12 col-md-6">
            <input type="text" name="firstName" placeholder="* name" required [(ngModel)]="contact.firstName" class="form-control" minlength="2" pattern="[a-zA-Z ]*" #firstName="ngModel" [class.is-invalid]="firstName.invalid && firstName.touched" />
            <small [class.d-none]="firstName.valid || firstName.untouched" class="error-msg">* field is required & must have two or more letters from the abc</small>
</div>

尝试分离错误并仅显示相关错误时，使用 *ngif 会导致对输入字段强制进行验证，但未显示错误消息。

<div class="col-12 col-md-6">
            <input type="text" name="firstName" placeholder="* name" required [(ngModel)]="contact.firstName" class="form-control" minlength="2" pattern="[a-zA-Z ]*" #firstName="ngModel" [class.is-invalid]="firstName.invalid && firstName.touched" />
            
            <div *ngif="firstName.errors && (firstName.invalid || firstName.touched)">
                <small class="error-msg" *ngif="firstName.errors.required">* is required</small>
                <small class="error-msg" *ngif="firstName.errors.pattern">* enter only letters</small>
                <small class="error-msg" *ngif="firstName.errors.minlength">* must have at least 2 letters</small>
            </div>
        </div>

不知道是什么问题

解决方法

我认为 *ngif 是一个错字，您应该将其更改为 *ngIf（驼峰式大小写）。