CODEWITHSUNDEEP
angulartypescriptangular-materialangular8
user12425844
user12425844

Reputation:

Material Input TextBox to be Outside Red in Error Validation

I used following links to change color of a textbox to darkish Grey..

https://material.angular.io/components/input/overview

Changing border color in mat-form-field

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: #757575!important;
}

However in error validation, doing this made the error outside color still remain Dark grey. I want it to be red, Only on error validation issues. How would someone resolve this?

Current Result:

enter image description here

Expected Result:

enter image description here

Upvotes: 1

Views: 2830

Answers (2)

user12425844
user12425844

Reputation:

Please utilize this code with mat-form-field-invalid

::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
    color: red!important;
}

Upvotes: 2

Amol
Amol

Reputation: 11

Please add these to CSS

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
            color: #757575!important;
            border: 1px solid red;
}

::ng-deep .mat-form-field-empty.mat-form-field-label {
            color: #757575;
            border: 1px solid red;
}

Upvotes: 1

Related Questions