Question

是否存在input:required {CSS}的等效方法，可以使用CSS在Angular的formControl中选择Validators.required的所有反应形式字段？还是有一些解决方法可以做到这一点？

Answer 1

更新2（有效）

Angular没有提供用于获取FormControl验证器的解决方案，这意味着我们将不得不恢复为相当笨拙的解决方案

他们目前基本上所做的是遍历FormControl，在空控件上执行验证器

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

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

我创建了一个堆栈闪电来说明它 https://stackblitz.com/edit/angular-hifypw?file=src%2Fapp%2Fapp.component.ts

所需的FormControl将以红色背景呈现。我使用模板变量theForm获取持有FormGroup的Element的所有权，然后选择类型为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-control[required]。
请记住，设置单选按钮和复选框的样式与文本字段和选择框的样式完全不同。
例如，您不能在<input type="checkbox" />和<input type="radio" />

上设置边框

因此，您甚至可能更加具体（但仍然不太具体） .form-control[type="text"][required]

或另一种解决方案，只需创建一个CSS类.required并与angular分离即可。

反应形式中必需的输入CSS选择器等效项

1 个答案: