2

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

4

1 回答 1

2

更新 2（工作）

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

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

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

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

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

所需的 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来获得你想要的东西。我会调查，但它可能会有点hacky。

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

你可以使用input[type=text][required]等等。

虽然这基本上可以工作，但我认为它是一个非常广泛的选择器，可能会在您的项目后期导致问题，并且您将编写一些丑陋的 css 规则只是为了规避这个规则。
我要做的是创建一个 CSS 类来表示一个表单控件，就像引导框架那样。

类似的东西.form-control[required]。
请记住，样式化单选按钮和复选框的工作方式与文本字段和选择框完全不同。
例如，您不能在<input type="checkbox" />和上设置边框<input type="radio" />

所以你甚至可能更具体（但仍然不太具体） .form-control[type="text"][required]

或其他解决方案，只需创建一个 css 类.required并与 angular 解耦。

于 2019-03-15T11:10:21.013 回答