Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTML and TS code. Any ideas on what could be causing this issue?

Here is the HTML code:

<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                                <mat-label>Producer</mat-label>
                                <input matInput formControlName="Producer" readonly="readonly">
                                <mat-icon matSuffix class="disabled-text">short_text</mat-icon>
                                <mat-error>Producer is Mandatory!</mat-error>
                            </mat-form-field>

And here is the TS code:

 Producer: new FormControl(
                {
                    value:
                        this.order.ProducerSellerCode +
                        "-" +
                        this.order.ProducerSellerName,
                    readonly: true,
                },
                [Validators.required]
            ),

https://i.sstatic.net/WoFdt.png

Answer №1

When you see [object Object] displayed, it means that a JavaScript object is being assigned to your input field.

To modify the text color of a readonly input field, you can implement the following CSS styles:

input:read-only {
  color: black;
}
//OR
input[readonly] {
  color: black;
}

If you want these styles to only apply to a specific type of element, replace "input" with the corresponding class name.

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

How can you access and utilize the inline use of window.location.pathname within a ternary operator in

I need assistance with writing a conditional statement within Angularjs. Specifically, I want to update the page to have aria-current="page" when a tab is clicked. My approach involves checking if the tab's anchor href matches the current window' ...

Tips for adjusting the width of columns automatically in exceljs

One of my challenges is to automatically adjust column width using exceljs. I want the Excel sheet to be dynamic, saving only the columns specified by the user in the request. Here is the code snippet that accomplishes this: workSheet.getRow(1).values = dt ...

Gathering the presently unfinished observables within a superior-level rxjs observable

As an illustration, let's consider a scenario where I have a timer that emits every 5 seconds and lasts for 10 seconds. By using the scan operator, I can create an observable that includes an array of all the inner observables emitted up until now: c ...

Efficiently repositioning Kendo Mobile Buttongroup to a new row as needed

In my current project, there is a specific requirement to display three button groups in a row. If there are more than three buttons, they should move to the next row dynamically as the data will be fetched from the server. For reference, below is a sampl ...

`Slide bootstrap carousel without moving other elements`

.carousel { position: relative; height: 500px; .carousel-inner .item { height: 500px; } .carousel-indicators > li { margin: 0 2px; background-color: $maincolor; border-color: $maincolor; opacity: .7; ...

What are some solutions for resolving a background image that fails to load?

HTML: `<div class="food-imagesM imagecontainer"> <!--Page info decoration etc.--> </div>` CSS: `.food-imagesM.imagecontainer{ background-image: url("/Images/Caribbean-food-Menu.jpg"); background-repeat: no-repeat; backgroun ...

Is Babel necessary for a Node.js server application, and what are the benefits of using it?

My fondness for ES6 syntax and its new object-oriented style makes coding much easier for me. However, as a newcomer to JavaScript, I am curious about the advantages and disadvantages of using Babel in terms of performance, maintenance, readability, and ...

The Recoil Nexus encountered an error: the element type provided is not valid. It should be a string for built-in components or a class/function for composite components, but an object was

Encountered the following error message: Error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at ReactDOMServerRenderer.render ... This issue arose when integra ...

Tackling the challenge of merging PDF files and designing a Table of Contents feature reminiscent of Acrobat in Node.js and JavaScript

I am currently implementing the following code snippet: const pdfmerger = require('pdfmerger') var pdfStream = pdfmerger(array_of_pdf_paths) var writeStream = fs.createWriteStream(final_pdf_path) pdfStream.pipe(writeStream) pdfmerger(array_of_pd ...

Is it possible to enclose an image with two <div> tags in a single line?

Can anyone help me with this layout issue I am facing? I have two <div>s wrapping an image in the same row, but for some reason, the right <div> keeps dropping below. I've attempted using float, display:inline-block, and tweaking the styl ...

Using Jest and Supertest for mocking in a Typescript environment

I've been working on a mock test case using Jest in TypeScript, attempting to mock API calls with supertest. However, I'm having trouble retrieving a mocked response when using Axios in the login function. Despite trying to mock the Axios call, I ...

Destructuring and For of Loop in ES6: Capturing the first object only

Working with my react app, I have a specific object called 'topics' that I am looping through: const topics = [ {name: 'Mon', color: 'blue', id: 1}, {name: 'Tue', color: 'red', id: 2}, {name: 'W ...

Storing data efficiently with Angular 2's local storage service

I am attempting to create a ToDoList using localstorage within a service. add.component.ts export class AddComponent implements OnInit { item: Item[]; constructor( private router: Router, private itemService: ItemService) { } ...

Invoking a function in a React component from another component

I am trying to implement a page with the structure shown below: const Upload = (props) => { return ( <BaseLayout> <ToolbarSelection /> <Box> <FileDropArea /> </ ...

NodeJS File Upload: A Step-by-Step Guide

I need assistance with uploading an image using nodejs. I am able to successfully send the file to node, but I am unsure how to handle the "req" object. Client <html> <body> <input id="uploadInput" type="file"/> < ...

Tips for placing input fields beside one another in Bootstrap 3

How do I resize and align these 3 input fields in a small size within the modal window: <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10 inline-fields"> < ...

Transformation of firebug console information into a function()

Snippet of JavaScript code: KT_initKeyHandler(b) Firebug console output: KT_initKeyHandler(b=keydown charCode=0, keyCode=90) Corresponding JavaScript function call: KT_initKeyHandler(?) Example: Snippet of JavaScript code: KT_event(b,c) Firebug ...

Seamless blend of images with a stunning mosaic transition effect

I attempted to create a mosaic effect on my carousel similar to this example: , but not exactly like this. I want to include control buttons for next and previous, and have images in HTML tag. However, my attempt is not working and I need help. This is ...

Spin picture and optimize margins

I need help rotating an image by 90 degrees that is positioned between two boxes. The issue I am facing is that the rotated picture overlaps with the two boxes in this scenario. Example 1: Incorrect formatting CSS: .box{ height:50px; width:200px ...

What is the best way to merge multiple nested angular flattening operators together?

I am facing a challenge in utilizing the outcomes of Observables from various functions. Some of these functions must be executed sequentially, while others can run independently. Additionally, I need to pass the result of the initial function to some nest ...