更改样式无效 && 已触及
change style invalid && touched
当另一个字段为 touched
和 invalid
时,我正在尝试更改 i
标签样式,如下所示,但 i
标签并没有真正改变,只有input
标签更改。
input.ng-touched.ng-invalid
{
border-color: red;
}
input.ng-valid
{
border-color: green ;
}
.green-icon
{
color:green;
}
.red-icon
{
color:red;
}
<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 #CardOwnerName formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
</div>
</div>
我假设我的 Angular 版本遗漏了一些东西。也许有些东西被弃用了?
删除模板中元素的引用,取而代之的是访问表单对象:
<input formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
get CardOwnerName() {
return this./* form group name here */.get('CardOwnerName');
}
这样试试:
<i class="fas fa-user circle" [ngClass]="{'red-icon': form.get('CardOwnerName').invalid, 'green-icon': form.get('CardOwnerName').valid }" ></i>
或者,
<i class="fas fa-user circle" [ngClass]="(form.get('CardOwnerName').valid)?'green-icon':'red-icon'" ></i>
ChangeDetectionRef
修正的错误。
import {ChangeDetectorRef } from '@angular/core';
constructor( private cdref: ChangeDetectorRef ) {}
ngOnInit() {
this.cdref.detectChanges();
}
当另一个字段为 touched
和 invalid
时,我正在尝试更改 i
标签样式,如下所示,但 i
标签并没有真正改变,只有input
标签更改。
input.ng-touched.ng-invalid
{
border-color: red;
}
input.ng-valid
{
border-color: green ;
}
.green-icon
{
color:green;
}
.red-icon
{
color:red;
}
<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 #CardOwnerName formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
</div>
</div>
我假设我的 Angular 版本遗漏了一些东西。也许有些东西被弃用了?
删除模板中元素的引用,取而代之的是访问表单对象:
<input formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
get CardOwnerName() {
return this./* form group name here */.get('CardOwnerName');
}
这样试试:
<i class="fas fa-user circle" [ngClass]="{'red-icon': form.get('CardOwnerName').invalid, 'green-icon': form.get('CardOwnerName').valid }" ></i>
或者,
<i class="fas fa-user circle" [ngClass]="(form.get('CardOwnerName').valid)?'green-icon':'red-icon'" ></i>
ChangeDetectionRef
修正的错误。
import {ChangeDetectorRef } from '@angular/core';
constructor( private cdref: ChangeDetectorRef ) {}
ngOnInit() {
this.cdref.detectChanges();
}