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

Question

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

Answer 1

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

phone.invalid

Answer 2

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

AS：

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

More about ngClass

Answer 3

您的破折号会被插值！引号是必需的。 像这样的东西。

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

Answer 4

这里您需要使用"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