如何停止在角度md2输入textarea控件中同时应用必需的scss和ng-invalid类scss

Question

我对css/scss有点陌生。我在要传递正则表达式的地方使用材料textarea进行控制，而且在该组件的模板中也必须对其进行控制。在我的scss和template文件中，我编写了以下代码：

文本区域控件：

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

textarea scss：

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

当textarea为空时（如果用户删除了其中的所有内容。）它将突出显示textarea控件，如下所示：

在上述情况下，我认为它添加了所需的类以及我添加的css类。我如何在regEx无效和要求未完全填充的情况下应用一个scss类，而无需重复以下两条底部边界线。

Answer 1

尝试使用：

[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

---

来自SCSS ：

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