1

I have a use case where a component form shared between Admin and Employee. When the component is access by Admin, the form is write-able but READONLY when access by employee. i know the simplest code line to make the form READONLY when access by employee is

Controller Logic

  createEntitlementForm() {
    this.entitlementForm = this.formBuilder.group({
      entitlements: this.formBuilder.array([])
    });
  }

  async populateEntitlementForm() {
    this.user = await this.alicia.getUser(this.email);

    this.claimTypes = await this.alicia.getClientDoc("Claim/ClaimTypes");

    this.entItems = await this.hcm.CLMGetEntitlements(3, this.email);
    Object.keys(this.entItems).forEach(k => {
      this.addEntitlement({ docId: k, ...this.entItems[k] });
    });


    if (!this.bAdminAccess) {
      this.entitlementForm.disable({ onlySelf: false });
    }
  }

But it will make the form extremely hard to read as all text become grey. Is there a way to keep the form READONLY but still keep the text as black color to improve readability? I know i can use [readonly]=1 in template file but it seems is not the recommended way as chrome alerted me to disable under control layer and not template layer.

I do not share the template logic as it's too long and i disable via controller and not template. Here is my newly built sample https://stackblitz.com/edit/ng-disableform

Weilies
  • 500
  • 1
  • 7
  • 27

1 Answers1

3

Just override the default css for disabled, Add the following lines in app.component.css

input:disabled {
  color: black;
}

select:disabled {
  color: black;
}

// Add in style.scss as we are overriding css of global mat-select class which is part of other module.
.mat-select-disabled .mat-select-value {
  color: black;
}
Jasdeep Singh
  • 7,901
  • 1
  • 11
  • 28
  • hi, it worked for text but not selection/dropdown box :) – Weilies Apr 06 '20 at 03:59
  • Updated my answer. – Jasdeep Singh Apr 06 '20 at 04:24
  • hi @Prince, your code is perfectly good for simple – Weilies Apr 06 '20 at 14:07
  • You need to check whats happening in case of mat-select. Right now an extra class get added to select when it is disabled, so we need to override that. You can check these extra classes by inspecting elements. – Jasdeep Singh Apr 06 '20 at 14:14
  • i can see following css while inspect in chrome. I update alpha value to 1 and the disabled dropdown field became black! It's what i want! :) .mat-select-disabled .mat-select-value { color: rgba(0,0,0,.38); } but when i added exact same code to my .css stylesheet, change the alpha to 1 .mat-select-disabled .mat-select-value { color: rgba(0,0,0,1); } It goes back same issue and inspect shows alpha as 0.38 again. I run out of idea. – Weilies Apr 07 '20 at 03:32
  • I updated the code as well yesterday, please check my answer. You need to add code to main style.css as written in comment. – Jasdeep Singh Apr 07 '20 at 03:35
  • hi @Prince!!! i jz found out the solution!! YES! like what you mentioned. added to style.css instead of app.component.css :) Thanks for the help. – Weilies Apr 07 '20 at 03:41