Angular - reactive form - material - color icon when invalid

Question

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;
}

Aniket Avhad Aniket Avhad · Accepted Answer · 2018-08-21T09:44:45

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;
}

Angular - reactive form - material - color icon when invalid

2 Answers