检查输入控件是否在 angular2 中具有某种类型的验证器

Question

我有包装输入字段的组件。在组件中，我收到来自@Input() inputControl: Control; 的Control 对象。在模板中，如果不需要组件中的输入字段，我有显示消息的跨度。

<span
  class="input-label-caption">
  (optional)
</span>

和输入

<input
    *ngIf="inputMode=='text' || inputMode=='email'"
    type="{{inputMode}}"
    [ngFormControl]="inputControl"
    placeholder="{{placeholder}}"
    class="input-text"
    [disabled]="inputDisabled"
    [ngClass]="{
    'inverted': inverted
    }">

如果inputControl 对象包含Validators.required，我如何读取它？ 我想知道我是否可以像这样使用它

<span
  class="input-label-caption"
  *ngIf="!inputControl.validators.required"
  >
  (optional)
</span>

Answer 1

有点晚了，但对我有用的是检查控件是否具有validator 或asyncValidator 方法。这样你就知道控件是否有一些同步验证器或一些异步验证器。 然后，如果您想知道调用了该方法的验证器。

同步验证器：

const getSyncValidators= (control: FormControl) => {
   if(control.validator) {
     return control.validator({} as AbstractControl);
   };
};

异步验证：

const getAsyncValidators= (control: FormControl) => {
   if(control.asyncValidator) {
     return control.asyncValidator({} as AbstractControl);
   };
};

对于异步验证器，您会得到一个 observable，您看不到异步验证器的名称。

如果您只想知道它有一个异步验证器，这是一种简单的方法。

始终检查 control.validator 或 control.asyncValidator 是否存在，因为没有任何验证器的控件会因为函数不存在而引发错误。

Answer 2

考虑到自一月份以来对 Angular 的更改，我无法使上述工作正常工作，这并不奇怪。使用最新版本的 Angular (2.2.0)，你的课堂上将需要这样的东西。

  get required(): boolean { 
    var _validator: any = this.inputControl.validator && this.inputControl.validator(this.inputControl);
    return _validator && _validator.required;
  }

这也将处理您有多个反应形式的验证器的情况，例如

      name: ['', [Validators.required, Validators.minLength(2)]]

Answer 3

你可以尝试使用这个表达式：

<span
  class="input-label-caption"
  *ngIf="!inputControl.errors?.required"
>
  (optional)
</span>

errors 属性包含每个失败的验证器名称的条目。

我将 Elvis 运算符用于 errors 属性，因为如果没有验证错误，它可以是未定义的。

编辑

根据您的评论，我认为您可以使用 === 运算符和 Validators.required 函数直接检查“必需”验证器。事实上，验证器只是一个函数，Validators.required 函数用于“必需”验证。

下面是对应的代码：

this.hasRequiredValidator = (this.inputControl.validator === Validators.required);

如果validator属性是一个数组，你需要扩展一点测试来检查数组中是否存在Validators.required函数。

现在模板中的代码是：

（可选的）

希望对你有帮助 蒂埃里