Отключить NG-недействительным для formGroup

Question

У меня есть свойство 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>

И у меня есть 2 красные левые границы, одна для поля и 1 для строки

Я пытался:

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

но это не похоже на работу. Любая идея, как я могу отключить красную рамку для строк?

Answer 1

Вы можете попробовать добавить :not(.row) к вашему селектору, если вы не хотите отображать красную границу в div с строкой класса.

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

.not css селектор документы: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Похоже, вам также необходимо применить синтаксис: not (.classname) для регистра formGroup, например:

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