css - 为 formGroup 禁用 ng-invalid

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

如果您不想在带有 row 类的 div 上显示红色边框，您可以尝试将 :not(.row) 添加到您的选择器。

.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

看起来您还需要像这样为 formGroup 案例应用 :not(.classname) 语法:

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