I'm preparing reactive form in Angular (with Material), nad I would color icon, when the field is invalid.
component class
wholeForm = new FormGroup({
...
contact: new FormGroup({
...
city: new FormControl('', [Validators.required])
}),
...
});
component html template
<form [formGroup]='wholeForm' (ngSubmit)='onSubmit()'>
...
<div class="form-group" formGroupName="contact">
...
<div class='code-city'>
<mat-form-field>
<input formControlName="postalCode" matInput maxlength="5" placeholder="postal code*">
</mat-form-field>
<mat-form-field>
<input formControlName="city" matInput placeholder="city*">
<mat-icon matSuffix>location_on</mat-icon>
</mat-form-field>
</div>
I tried to add some local reference to city
input and in mat-icon
[class.red-icon]='city.invalid'
, but it didn't work. Next I also tried to bind class to propertie in class, without result.
CSS class works, when i hardcoded to wholeForm.valid
.
CSS
.red-icon{
color: red;
}
尝试
[class.red-icon]="wholeForm.controls.contact.controls['city'].invalid && wholeForm.controls.contact.controls['city'].touched"
Use this code,
<div class='code-city'>
<mat-form-field>
<input formControlName="postalCode" matInput maxlength="5" placeholder="postal code*">
</mat-form-field>
<mat-form-field>
<input formControlName="city" matInput placeholder="city*">
<mat-icon matSuffix>location_on</mat-icon>
</mat-form-field>
</div>
and in style.css
.mat-form-field-invalid .mat-icon {
color: red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.