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

Question

我有包装输入字段的组件.在组件中我Control从中接收对象@Input() inputControl: Control;.在模板中,我有span,如果不需要组件中的输入字段,则显示消息.

<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

您可以尝试使用此表达式:

<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函数是否存在于数组中.

现在模板中的代码将是:

(可选的)

希望它对你有帮助,蒂埃里

Answer 2

我无法让上述工作起作用，考虑到 Angular 自 1 月份以来的变化，这并不奇怪。使用最新版本的 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)]]