formgroup标签以大写形式显示，但我希望它为标题大写

Question

我有以下角度模板。我注意到，即使在页面呈现时标签位于标题大写的情况下，标签也会转换为大写，我不喜欢它。因此，我决定使用titlecase管道，并在标签文本两边加上单引号。但是，标签仍为大写（图像仅供参考）

我想这应该很简单，但是我不知道如何使它起作用。有什么想法吗？

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label for="total">
          {{'Total' | titlecase}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label for="supporters">
          {{'Number of supporters' | titlecase}}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

Answer 1

似乎与您的CSS有关。

可能是您使用的库或css文件为<label>设置了属性text-transform: uppercase;。

您可以尝试使用以下自定义CSS规则来覆盖它：

HTML

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label class="custom-label-title" for="total">
          {{'Total'}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label  class="custom-label-title" for="supporters">
          {{'Number of supporters' }}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

CSS

.custom-label-title {
  text-transform: capitalize;
}

只要万一它不起作用（仅用于测试目的），请添加!important：

CSS

.custom-label-title {
  text-transform: capitalize !important;
}

因为可能发生其他CSS规则具有更高的优先级：

What is the order of precedence for CSS?