Как отключить форму angular, но оставить цвет текста черным (читаемым) - PullRequest
Новая
       19

Как отключить форму angular, но оставить цвет текста черным (читаемым)

0 голосов
/ 03 апреля 2020

У меня есть сценарий использования, когда форма компонента используется совместно администратором и сотрудником. Когда компонент доступен администратором, форма доступна для записи, но ЧИТАЕТСЯ только при доступе сотрудника я знаю простую строку кода, чтобы сделать форму ЧИТАЙТЕ ТОЛЬКО, когда доступ сотрудника

Контроллер Logi c

  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 });
    }
  }

Но это сделает форму чрезвычайно трудной для чтения, поскольку весь текст становится серый. Есть ли способ сохранить форму ЧИТАТЬ, но при этом сохранить текст в черном цвете для улучшения читабельности? Я знаю, что могу использовать [readonly] = 1 в файле шаблона, но, похоже, это не рекомендуемый способ, так как chrome предупредил меня об отключении под слоем управления, а не под слоем шаблона.

Я не разделяю логи шаблона c так как это слишком долго, и я отключаю через контроллер, а не шаблон. Вот мой недавно построенный образец https://stackblitz.com/edit/ng-disableform

1 Ответ

2 голосов
/ 04 апреля 2020

Просто переопределите значение по умолчанию css для отключенного, добавьте следующие строки в 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;
}
...