Css 禁用对formGroup无效的ng

我有一个CSS属性：

.ng-dirty.ng-invalid:not(form):not(formGroup) {
  border-left: 5px solid #ff5663; /* red */
}

当表单输入无效时，它会给我一个红色指示灯

但我有一个案例，我的表单是一个

formArray

：

<form (ngSubmit)="onSubmit()" [formGroup]="competitorForm">
  <div formArrayName="competitors">
    <div class="row" *ngFor="let competitor of competitorForm.controls['competitors'].controls; let i = index"
           formGroupName="{{i}}">
        <div class="col-md-3">
          <div class=" form-group">
            <input type="text" class="input-lg" formControlName="firstname" placeholder="First name"
                   [ngClass]="{ 'is-invalid': submitted && competitor.controls.firstname.errors }">
            <div *ngIf="(submitted && competitor.controls.firstname.errors)" class="text-primary">
              <div *ngIf="competitor.controls.firstname.errors.required" translate
                   [translateParams]="{attribute: 'firstname'}">
                validation.required
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</form>

---

但它似乎不起作用。知道如何禁用行的红色边框吗？

如果不想在带有类行的div上显示红色边框，可以尝试向选择器添加

：not（.row）

.ng-dirty.ng-invalid:not(form):not(formGroup):not(.row) {
  border-left: 5px solid #ff5663; /* red */
}

.不是css选择器文档：

看起来您还需要为formGroup大小写应用：not（.classname）语法，如下所示：

.ng-dirty.ng-invalid:not(form):not(.formGroup):not(.row) {
  border-left: 5px solid #ff5663; /* red */
}

---

现在红色边框在formArrayName级别，它覆盖了模态的所有高度，我将更新我的codeadded，而不是使用：not pseudo selector来删除各种不可控的情况，我将执行更具体的类，比如：input.ng-dirty.ng-invalid{}但是您需要注意应用程序的其余部分，以免在其他情况下产生负面影响。它是有效的。我认为它不会有副作用！谢谢@朱利亚特津德尔托罗：如果我能帮忙，我很高兴；）非常感谢。

.ng-dirty.ng-invalid:not(form):not(.formGroup):not(.row) {
  border-left: 5px solid #ff5663; /* red */
}