使用 ngif 进行 Angular 表单验证

Question

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

当使用简单的表单时——像这样的单个错误行可以正常工作

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

不知道是什么问题

Answer 1

我认为*ngif 是一个错字，你应该把它改成*ngIf（驼峰式）。