引导验证在Angular框架中不起作用
引导验证在Angular框架中不起作用
提问于 2019-03-14 12:57:47
我需要让输入框的颜色根据它的状态改变颜色，有效或无效。我正在遵循一个教程，在他的教程中，它是可以改变的。我复制并粘贴了他的代码，所以我可以非常确定我没有遗漏任何东西，但我仍然无法让它工作。下面是我的代码：
styles.css
input.ng-touched.ng-invalid{
border-color: #dc3545;
}
input.ng-valid{
border-color: #28a745;
}payment-detail-component.ts
<form #form="ngForm" autocomplete="off">
<input type="hidden" name="PMId" [value]="service.formData.PMId">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text bg-white">
<i class="fas fa-user-circle" [class.green-icon]="CardOwnerName.valid" [class.red-icon]="CardOwnerName.invalid && CardOwnerName.touched"></i>
</div>
</div>
<input name="CardOwnerName" #CardOwnerName="ngModel" [(ngModel)]="service.formData.CardOwnerName" class="form-control"
placeholder="Card Owner Name" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text bg-white">
<i class="far fa-credit-card" [class.green-icon]="CardNumber.valid" [class.red-icon]="CardNumber.invalid && CardNumber.touched"></i>
</div>
</div>
<input name="CardNumber" #CardNumber="ngModel" [(ngModel)]="service.formData.CardNumber"
class="form-control" placeholder="16 Digit Card Number" required maxlength="16" minlength="16">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text bg-white">
<i class="fas fa-calendar-alt" [class.green-icon]="ExpirationDate.valid" [class.red-icon]="ExpirationDate.invalid && ExpirationDate.touched"></i>
</div>
</div>
<input name="ExpirationDate" #ExpirationDate="ngModel" [(ngModel)]="service.formData.ExpirationDate" class="form-control"
placeholder="MM/YY" required maxlength="5" minlength="5">
</div>
</div>
<div class="form-group col-md-5">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text bg-white">
<i class="fas fa-key" [class.green-icon]="CVV.valid" [class.red-icon]="CVV.invalid && CVV.touched"></i>
</div>
</div>
<input type="password" name="CVV" #CVV="ngModel" [(ngModel)]="service.formData.CVV" class="form-control" placeholder="CVV"
required maxlength="3" minlength="3">
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block" type="submit" [disabled]="form.invalid"><i class="fas fa-database"></i> Submit</button>
</div>
</form>当我使用检查器时，我应该看到iput盒子的不同状态，比如“原始的”，“触摸的”，“脏的”等等，但我没有看到它。你能告诉我怎么做吗？谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55155222
复制相关文章
相似问题