文本框的 is-invalid 类不起作用答案

【问题标题】：is-invalid class for a text box not works文本框的 is-invalid 类不起作用
【发布时间】：2019-01-30 14:57:44
【问题描述】：

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

【问题讨论】：

使用!phone.valid 而不是phone.invalid 像这样：`[ngClass]="{'is-invalid': !phone.valid}"
is-invalid 类将在表单字段无效时追加。因为您没有使用任何验证，所以它不起作用。
检查 stackblitz 演示以解决您的问题stackblitz.com/edit/angular-ekbuqz?file=src/app/…

标签： javascript html css angular

【解决方案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

【讨论】：

【解决方案2】：

使用[ngClass]="{'is-invalid' : phone.invalid}"

作为：

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

More about ngClass

【讨论】：

【解决方案3】：

你的破折号被插值了！需要报价。像这样。

[ngClass]="{'is-invalid': someBooleanValue}"

【讨论】：

【解决方案4】：

像这样使用!phone.valid 而不是phone.invalid：

 [ngClass]="{'is-invalid': !phone.valid}"

【讨论】：