Angular 反应式表单中所需的等效输入CSS选择器

是否有一种与

input:required{CSS}

等效的方法来使用CSS选择Angular中所有反应式表单字段，这些字段在其formControl中具有

验证器。required

？或者有一些解决方法可以做到这一点？

更新2（工作）

Angular没有提供获取FormControl验证程序的解决方案，这意味着我们将不得不恢复到相当粗糙的解决方案

他们目前主要做的是循环FormControls，在一个空控件上执行验证器

const validator = abstractControl.validator({}as AbstractControl);
            if (validator && validator.required) {
                return true;
            }

并检查其是否需要验证程序。
虽然这在技术上可行，但它执行所有同步验证器！ 例如，您可以获取对表单控件的nativeElements的引用，并通过

formControlName

对它们进行比较

我创建了一个stackblitz来说明这一点

所需的FormControl将以红色背景呈现。 我使用了一个模板变量

theForm

来获取包含

FormGroup

的元素，然后选择类型

input

的每个子元素
然后，我循环检查它们是否具有所需的验证器。
要进行比较，我使用formControlName

 const controls =  this.getValidators(this.frmMain.controls);
      this.elements.forEach(x => {
            x.nativeElement.querySelectorAll('input').forEach(i => {

              const c = controls[i.attributes['formcontrolname'].value];

              if(i.attributes['formcontrolname'] && c && c.required && !i.classList.contains('test')) {
                i.classList.add('test');
              }

            });
    })

我认为这是一个相当简单的工作很多。 另外，我的方法目前只在所有表单控件都在同一个组件中时才有效（当然它只包含输入），我不知道它是否能与AOT一起工作

它可以工作，但我更愿意使用自定义指令或简单的css类

更新

目前唯一的解决方案是创建一个类

。required

，并手动添加它

也许您可以使用

@ViewChildren

和

FormControl

的组合来获得您想要的。我会调查的，但可能会有点黑

以下仅适用于模板驱动的表单

您可以使用

input[type=text][required]

等等

虽然这基本上是可行的，但我认为这是一个非常广泛的选择，可能会导致项目中出现问题，您将编写一些丑陋的css规则来规避此规则。
我要做的是创建一个css类来表示表单控件，就像bootstrap框架所做的那样

类似于

.form控件[必需]

请记住，设置单选按钮和复选框的样式与文本字段和选择框的工作方式截然不同。
例如，您不能在

和

因此，您可能会更具体（但仍然不太具体）

.form控件[type=“text”][必需]

---

或者另一个解决方案，只需创建一个css类

.required

并与angular解耦。

可以尝试此

.ng valid[required]，.ng-valid.required{css}

这不起作用…很抱歉，此解决方案不起作用，因为被动表单似乎没有注入任何[required]属性引用到HTML元素…好吧，愚蠢的我，我有我们的反应表单应用程序在我面前，并设法选择一个控件，它不是一个标准的输入，实际上有属性，抱歉。我将编辑我的帖子。我用一个反应式表单的解决方案更新了我的答案，希望它能帮助Hanks@Arikael，我认为这是目前最好的解决方法，但不幸的是，它不是问题的解决方案，因此，最好的“解决方案”是手动添加一个简单的CSS类。如果我的答案有帮助，你能接受它作为答案：）