<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
CodePudding user response：
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.
CodePudding user response：
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;
}