'Dynamically Change colour/css styling of Disabled text boxes based on boolean value

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

In my angular project (using typescript). I have a Boolean called "isApplicationLocked". When this boolean is true, it will disable the text box and not allow the user to edit the text. However, not all portions of the textbox are greyed out. The border and label still remain as black. How am I able to dynamically change the colour of all attributes in the text box, based on this value?

I am also using scss

htmlcssangulartypescript


Solution 1:[1]

First, you add the isApplicationLocked variable into the form group.

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

And then, you need to create a subscription for changing of this value.

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

Here changeDisabledState function is to change the disabled state of the input control.

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

Hope it could help you.

Solution 2:[2]

Use the :read-only CSS pseudo-class, to change the style for readonly mode on input or textarea.

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

    }

https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Lu
Solution 2 danywalls

Related Questions