Javascript 如何在角度md2输入文本区域控制中停止应用所需SCS和ng无效类SCS

我对css/scss有点陌生。我正在使用material

textarea

控件传递正则表达式，在该组件的模板中，它必须是必需的控件。在我的

scss

和

template

文件中，我编写了以下代码：

text区域控制：

<textarea [(ngModel)]="item" [name]="itemID" [pattern]="[a-zA-Z0-9]+" required></textarea>

 textarea {
    &.ng-invalid {
     border-bottom:1px solid #f00;
      ~ label {
        font-size: 14px;
      }
   }
  }

当

textarea

为空时（如果用户删除了其中的所有内容），它将突出显示

textarea

控件，如下所示：

在上面的场景中，我认为它添加了所需的类以及我添加的css类。如何在regEx invalid和required not full filled这两种情况下应用一个scss类，而不复制下面的两条底部边框线。

尝试使用：

[pattern]="[a-zA-Z0-9]*" // Will compare 0 or more , so won't trigger with required

代替

[pattern]="[a-zA-Z0-9]+"

---

正则表达式操作员：

a*  0 or more
a+  1 or more
a?  0 or 1

---

来自SCS：

textarea {
    &:not(.required).ng-invalid {
     border-bottom:1px solid #f00;
      ~ label {
        font-size: 14px;
      }
   }
 }

---

我正在寻找scss的解决方案。因为它是数据驱动的web前端，其中正则表达式会动态更改。@SelakaN，我认为在这种情况下，您可以使用

：not（.class_name）

，如果您能给出基于代码的答案，我将不胜感激：）@SelakaN，请检查更新的答案，我认为这可以帮助你解释这个scss类做什么？将其标记为正确答案@维韦克·多西