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

Question

我正在以 Angular 制作模板驱动形式，我希望能够更改输入标签的颜色，例如一个select，当select无效时。

这是从表单中选择输入的示例:

<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>

当一个选择无效时，类 ng-invalid 被添加到元素。

更改选择样式非常容易:

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

我也想在select无效的时候改变label的颜色。我在 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 作为选择器来查找作为直接后代的所有 label 子级具有 select__wrapper 类的 div 以及将 ng-invalid 类作为直接后代的容器

---原答案---

我建议使用响应式形式而不是您当前使用的两种方式绑定(bind)。这将允许您根据表单或 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"

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