javascript - 文本框的无效类无效

Question

当文本框内没有值时，我希望文本框为红色边框 <input type="tel" #phone="ngModel" [class.is-invalid]="phone.invalid" class="form-control" name="phone" [(ngModel)]="userModel.phone">

Answer 1

您在这里需要的是为输入标签使用 "ngClass]="{'is-invalid': !phone.valid}" 和 required 属性。

<input type="tel" #phone="ngModel" [ngClass]="{'is-invalid': !phone.valid}" class="form-control"  required name="phone" [(ngModel)]="userModel.phone">

这里是 Demo on stackblitz