输入无效时更改标签的颜色

Question

我正在制作一个有角度的模板驱动表单，我希望能够更改输入标签的颜色，例如选择无效时，选择。

以下是从表单中选择输入的示例：

<div class="select__wrapper">
    <label for="car-year">
        <span>Year of manufacture</span>
    </label>
    <select
            [(ngModel)]="vehicle.year"
            name="year"
            id="car-year"
            required
            class="form-control">
        <option *ngFor="let year of years" [ngValue]="year.value">
            {{ year.display }}
        </option>
    </select>
</div>

When a select is invalid, the class ng-invalid is added to the element.

很容易改变选择样式：

.select__wrapper {
    .ng-invalid {
        border-color: red;  
        color: red;
    } 
}

我还想在选择无效时更改标签颜色。我在stackoverflow上找到了以下内容：

How to select parent pseudo-class from within child using scss

这使用了兄弟组合，但是我必须重新排序我的元素并用位置来修改它们。我想知道是否有更好的方法是使用 SCSS 和/或 angular 来实现？

谢谢

Answer 1

更新：

刚刚看到您关于希望使用 css 执行此操作的评论。 如果是这种情况，那么您可能想要使用 :has() 选择器。

here 是文档

有了这个，您可以使用 div.select__wrapper:has(' > .ng-invalid') > label 作为选择器来查找所有 div 的直系后代 label 子代，并带有 select__wrapper 类并且该容器将 ng-invalid 类作为直系后代

---原答案---

我建议使用响应式表单而不是您当前使用的两种方式绑定。这将允许您根据表单或 FormControl 的有效性添加所需的任何类。

Here 是 Angular 响应式表单的官方指南

在高层次上，在你的课堂上做如下的事情。

export class SampleComponent implements OnInit {
   form: FormGroup;

   constructor(private fb: FormBuilder) {}
   
   ngOnInit(): void {
       this.form = this.fb.group({
          formField: ['', Validators.required]
       });
   }    
}

然后在您的模板中，您可以按照以下方式做一些事情

<div [formGroup]="form" class="select__wrapper">
    <label for="car-year" [class.invalid]="form.invalid">
        <span>Year of manufacture</span>
    </label>
    <select
            formControlName="formField"
            id="car-year"
            required
            class="form-control">
        <option *ngFor="let year of years" [ngValue]="year.value">
            {{year.display}}
        </option>
    </select>
</div>

通过使用响应式表单，您可以看到您可以根据表单是否有效[class.invalid]="form.invalid"向标签添加类

反应式表单非常有用，尤其是当您的表单超出单个表单字段时

Answer 2

试试这个：

/* The color of error message */
.fv-help-block {
    color: #dc3545;
}

/* The color of valid icon */
.has-danger .fv-plugins-icon {
    color: #dc3545;
}

/* The color of invalid icon */
.has-success .fv-plugins-icon {
    color: #28a745;
}

为所有表单或特定表单覆盖这些颜色，如下所示：

.my-form.fv-plugins-bootstrap .fv-help-block {
    color: #f39c12;
}
.my-form.fv-plugins-bootstrap .has-danger .fv-plugins-icon {
    color: #f39c12;
}
.my-form.fv-plugins-bootstrap .has-success .fv-plugins-icon {
    color: #18bc9c;
}

Answer 3

您可以使用与您相同的 CSS，当您的表单控件无效时，只需将 ng-invalid 类添加到您的 label 即可。您可以通过使用表单变量来做到这一点，例如：

<div class="select__wrapper">
  <label for="car-year" [ngClass]="{ 'ng-invalid': year.invalid && (year.dirty || year.touched) }">
    <span>Year of manufacture</span>
  </label>
  <select [(ngModel)]="vehicle.year"
          name="year"
          id="car-year"
          required
          class="form-control"
          #year="ngModel"> <!-- this will create variable you can access inside form -->
    <option *ngFor="let year of years" [ngValue]="year.value">
      {{year.display}}
    </option>
  </select>
</div>

Answer 4

当表单控件无效时，您可以使用指令添加“ng-invalid”类，并将表单控件添加为指令的输入。

向标签添加指令

<div class="select__wrapper">
<label for="car-year" checkInvalid  [control]="year">
<span>Year of manufacture</span>
</label>
<select [(ngModel)]="vehicle.year"
      name="year"
      id="car-year"
      required
      class="form-control"
      #year="ngModel"> <!-- this will create variable you can access inside form -->
<option *ngFor="let year of years" [ngValue]="year.value">
  {{year.display}}
</option>

定义指令

import { Directive, ElementRef, HostListener, Input } from   "@angular/core";

 @Directive({
   selector: "[checkInvalid]"
})
export class CheckInvalidDirective {
  @Input() control;

  constructor(private el: ElementRef) {
    this.control.valueChanges.subscribe(()=> {
      if(this.control.dirty && !this.control.valid)
         this.el.nativeElement.style.color = red;
         // Add class instead of this code if thats what u prefer
    })
  }

  
  
  

}