"Displaying the Material Input TextBox in a striking red color when an error occurs during

After referring to the links provided below, I successfully changed the color of a textbox to a darkish grey.

Link 1

Link 2

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

Although this solved the initial problem, it also affected the error validation display by keeping the outside color as dark grey. Ideally, I would like the error message color to change to red only during validation errors. How can this be fixed?

Current Result:

https://i.stack.imgur.com/K11ZO.png

Expected Result:

https://i.stack.imgur.com/dUeKu.png

angulartypescriptangular-materialangular8

Answer №1

Feel free to utilize the following code snippet along with mat-form-field-invalid

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

Answer №2

Don't forget to include the following in your 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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Redirecting with Angular2 from a static function

Hello, I currently have a 'static class' called Utils which contains only static methods (helpers): export class Utils { static doSomethingAndRedirect() { ...do something... redirectTo->'/home' } } I am ...

http-redirectangularroutesstatic-methodsnavigateurl

ng-zorro cascader lazy loading of data, the nzLoadData function returned as undefined

I am having trouble implementing lazy loading for a cascader. When I try to load the data, I get an error saying that 'this' is undefined in the load function. Interestingly, other functions within the component are working fine. Any help would b ...

angularng-zorro-antd

There is no initial value set for the property and it is not definitively assigned in the constructor

I encountered an issue while working on the following code snippet: export class UserComponent implements OnInit { user: User; constructor() { } ngOnInit() { this.user = { firstName : "test", lastName ...

angulartypescript

Is there a way to retrieve the number of swipe up interactions from Instagram story insights using the graph API

Is there a way to retrieve the swipe up count displayed in Instagram insights? Since Facebook does not provide this data through their Graph API, how can I access it? I have already tried scraping without success and I am looking for a solution using eith ...

pythondjangoangulartypescriptfacebook-insights

Troubleshoot Angular2 modules efficiently using source mapping features

Is there a way to debug Angular2 module code using TypeScript source mapping in the browser? After installing my project with the "npm install" command following the steps in https://angular.io/guide/quickstart, I noticed that while source mapping is ava ...

npmangulartypescript1.7

Instructions for designing a Loading Indicator or Progress Bar within the App Directory of NextJS

Having built a substantial web application using NextJS 13, I initially utilized the Pages Router. However, as I neared completion of the website, I decided to make the switch to the App Directory. The primary motivation behind this migration was not just ...

javascriptreactjstypescriptnext.jsmaterial-ui

Exploring the representation of recursive types using generic type constraints

Is there a way to create a structure that can handle recursive relationships like the one described below? I am looking to limit the types of values that can be added to a general container to either primitive data types or other containers. Due to limit ...

typescript

Why is the *.ngsummary.json file used?

I recently discovered AOT and ngc. When I run ngc, I notice numerous *.ngsummary.json files appearing in the src folder alongside the *.ts files. Can someone please explain their purpose? ...

angularangular-compiler-cliangular-compiler

Issue encountered with md-grid-list at reduced screen dimensions

I'm currently developing a mobile website that showcases products in a grid-list format. To create the grid list, I am utilizing the md-grid-list directive from Angular Material. Below is the snippet of code I wrote to implement this functionality: ...

angularjsangular-material

Is it possible that an error is triggered when utilizing canActivate or canChildActivate?

A problem has arisen while using canActivateChild or canActivate in the child route. Despite working fine previously, an error is now being thrown: ERROR in src/app/app-routing.module.ts(8,7): error TS2322: Type '({ path: string; redirectTo: string; ...

angulartypescript

Distinguishing Between TypeScript Interface Function Properties

Could anyone clarify why the assignment to InterfaceA constant is successful while the assignment to InterfaceB constant results in an error? interface InterfaceA { doSomething (data: object): boolean; } interface InterfaceB { doSomething: (data: obje ...

typescriptfunctioninterfaceproperties

Subscribing to Observables in Angular Services: How Using them with ngOnChanges Can Trigger Excessive Callbacks

Consider the following scenario (simplified): Main Component List Component List Service Here is how they are connected: Main Component <my-list [month]="month"></my-list> List Component HTML <li *ngFor="let item in list | async>&l ...

angularsubscriberrxjs6

NextJS: Build error - TypeScript package not detected

I'm facing an issue while setting up my NextJS application in TypeScript on my hosting server. On my local machine, everything works fine when I run next build. However, on the server, I'm encountering this error: > next build It seems that T ...

typescriptnext.js

What is the process for updating the internal TypeScript version in VS Code?

When using VS Code, I noticed it comes with its own TypeScript version: Is there a way to update this? The current version is 4.9.3. ...

javascripttypescriptvisual-studio-code

Can the contents of a JSON file be uploaded using a file upload feature in Angular 6 and read without the need to communicate with an API?

Looking to upload a JSON file via file upload in Angular (using version 6) and read its contents directly within the app, without sending it to an API first. Have been searching for ways to achieve this without success, as most results are geared towards ...

javascriptangulartypescriptangular6

Incorrect redirection using lazy-loaded modules

Encountering an Issue: Whenever I try to access localhost:4200, I expect to be redirected to different pages but it always redirects me to localhost:4200/login. I have 2 lazy load modules with childRoutes, but I'm confused as to why the redirection i ...

angularangular-ui-router

What is the best approach for retrieving a User from my Angular front-end service?

INQUIRY: I'm attempting to retrieve the details of the currently logged in user in my Angular 2 frontend service with the following code: UserModel.findById(userID, function (err, user) { It appears that this behavior is achievable from the browse ...

javascriptmongodbangularmongoose

Converting a JavaScript function to TypeScript with class-like variables inside: a step-by-step guide

During the process of converting a codebase to TypeScript, I encountered something unfamiliar. In particular, there are two functions with what appear to be class-like variables within them. The following function is one that caught my attention: const wai ...

javascripttypescript

When working with Angular and NGRX, I often wonder if opening my app in multiple tabs within the same browser will result in all tabs pointing to a single NGRX instance

Is it possible to access my localhost:9000 in multiple tabs? If I open it in 3 tabs, will all those 3 tabs point to a single NGRX instance or will each tab of localhost have its dedicated NGRX instance? I haven't had the chance to test this yet. ...

angulargoogle-chromengrxngrx-storengrx-effects

Generate a compressed file in RAM and then save it to Amazon S3

I'm currently working on a project where I need to compress text data into a zip file in memory using TypeScript and then upload it to an AWS S3 bucket. The input data is in plain text CSV format. However, I seem to be encountering an issue where the ...

typescriptamazon-s3aws-lambdaadm-zip