Modify the color and CSS styling of inactive text boxes according to a boolean variable

<label [invalid]="false" invalidText="" placeholder="Placeholder text">
    Middle names (optional)
    <input ibmText [attr.disabled]="isApplicationLocked" [invalid]="false" placeholder=""
    (keyup)="applicantControlValueChanged()" formControlName="PersonMiddleName">
<label>

I have a boolean variable called "isApplicationLocked" in my Angular project written in TypeScript. When the value of this boolean is true, it disables the text box and prevents the user from editing its content. However, I've noticed that not all elements of the text box are visually affected by this change - the border and label remain black. How can I dynamically alter the color of all components within the text box based on the value of this variable?

Additionally, I am using SCSS for styling purposes.

htmlcssangulartypescript

Answer №1

To begin, insert the isApplicationLocked variable within the form group.

this.formGroup = this.formBuilder.group({
  PersonMiddleName: new FormControl(
    ...
  ),
  disabled: this.isApplicationLocked
});

Next, set up a subscription to monitor changes in this value.

this.formGroup.get("disabled").valueChanges.subscribe(value => {
  this.changeDisabledState(value);
});

The function changeDisabledState will handle toggling the disabled state of the input control.

changeDisabledState(value: boolean): void {
    if(value){
        this.checkoutForm.controls['PersonMiddleName'].enable();
    }else{
        this.checkoutForm.controls['PersonMiddleName'].disable();
    }
}

Answer №2

One way to modify the appearance of input or textarea elements when they are in readonly mode is by using the CSS pseudo-class :read-only.

input:read-only,
textarea:read-only {
  background-color: #black;
}

To learn more about how to use the :read-only pseudo-class, check out this link: https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only

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

Can you show me a preview of an Angular template?

Is it possible to preview an Angular template without launching the entire application? I'm currently focused on refining CSS styles and would like the ability to instantly see any updates. ...

htmlcssangular

Exploring the world of third-party APIs

I am currently working on fetching data from an external API and displaying it. In order to enhance flexibility, I am aiming to completely separate the API integration from my code and use custom-defined data structures instead. Here is a brief visual ov ...

apitypescriptinterface

Ways to shift footer lower if there is a floating element in the div above it

Trying to move my footer to the bottom of the page, regardless of the amount of content above it. After researching online, I came across a solution on this website: However, everything was fine until I added "float: left" to the content div. Suddenly, th ...

css

Personalize the breakpoints of Bootstrap 4's grid system

In my project, I am facing a situation where I need a 1280 breakpoint to switch from desktop to tablet, instead of the xl breakpoint at 1200 as defined in Bootstrap. How can I globally change the xl breakpoint in Bootstrap without recompiling from the sour ...

csstwitter-bootstrapsassresponsive-designbootstrap-4

Centered logo in navigation bar

Is there a way to keep the logo in my navbar from pushing down and expanding the background height? I want the logo to sit on top and overlap without affecting the layout. If positioning the logo absolutely could solve the issue, how can I make it happen o ...

htmlcssbootstrap-4navbar

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

htmlcss

What is the reason for this interceptor being activated only for the Sent-Event and not for the actual response?

I am dealing with multipart/mixed content from a server that contains JSON and bytes. I need to parse this content into an object in Angular. This is how I make my request: public sendRequest(headerData: string): Observable<MultipartResponse> { ...

angularangular-http-interceptors

Is there a way to apply an indigo color solely to a div using CSS without affecting the entire body?

Can someone help me achieve a result similar to the image shown https://i.sstatic.net/IY1kI.png I've been working on some code, but I haven't been able to get the exact desired outcome. My goal is to make a div indigo and leave the rest of the b ...

htmlcssbootstrap-4

What is the best way to access the attribute value within an li element?

In my Angular 6 application, I am passing data through attributes. First, I use [attr.parent_id] in the ul tag like this: <ul class="list-unstyled" id="1" [attr.parent_id]="123"></ul> To retrieve this value, I use console.log(target.getAttri ...

javascripthtmlangulartypescriptfor-loop

Using Selenium to extract and manipulate text content enclosed within specific HTML tags

Imagine you have this snippet of HTML code <tag1> "hello" <tag2></tag2> "world" </tag1> If we use driver.find_element(By.CSS_SELECTOR,"tag1").text, it will display the string "helloworld". ...

pythoncssseleniumselenium-webdrivercss-selectors

Is it possible to have a synchronous function imported in typescript?

// addons.ts export interface addon { name: string; desc: string; run: (someparam: any) => void; } export function loadaddons(): Array<addon> { let addons: Array<addon> = []; fs.readdirSync(path.join(__dirname, "addons")) .fi ...

typescript

Triggering unexpected syntax error upon clicking the dropdown menu in the navigation bar

I encountered an error when attempting to click the dropdown list on my website. The error message reads as follows: Uncaught Syntax error, unrecognized expression: #. This error only seems to occur when using Chrome or Edge browsers. Currently, I am usi ...

javascripthtmljquery

The value of Component variable is not defined

I am facing an issue with my User variable being undefined after calling my service. Here is the code snippet : import { User } from './user/user'; import { AppService } from './app.service'; import { Component, OnInit } from '@an ...

angulartypescript

Creating a type array for the interface in Angular 11

A newly created interface named Test in Angular 11 contains the following properties: export interface Test { id:number; name:string; } After exporting the interface, an array named ProvinceAllStudent was created to store test data. impor ...

angulartypescript

How can you apply the min-width property to a CSS element floating to the right?

Check out this demonstration When utilizing float:right in the CSS rules, the html does not adhere to the specified min-width. .right { float:right; background:blue; min-width:400px; } By removing the float:right or adjusting it to float:lef ...

htmlcss-floatcss

Challenge with squeezing table data in Bootstrap table cells

I'm seeking advice on how to eliminate the squeezing of a table. <div class="container"> <table id="table" class="table table-hover" name="table"> <tr> <td class="col-md-1">20.09.2015</t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips on maximizing the file size limit of the fileupload control in asp.net

I am trying to determine the file size limit for my file upload control. Below is the HTML code snippet: <input id="uplTheFile" style="WIDTH: 318px; HEIGHT: 22px" type="file" size="80" name="uplTheFile" runat="server"> I have checked the code but ...

c#cssasp.net

Tips for changing form field values using jQuery

Is there a way to use jQuery to retrieve the values of multiple checkboxes and insert them into a hidden form field? Here is how my checkboxes are structured: <form> <input type="checkbox" name="chicken" id="chicken" />Chicken <in ...

jqueryhtml

Aligning content in a parent DIV using CSS after pseudo-element and float

Is there a way to center content vertically, which is generated by a ::after pseudo-element, within the parent element even when the ::after pseudo-element has a float: right declaration? The CSS code I have looks like this: .label-dot::after, .label-dot ...

htmlcsspseudo-element

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js