Question

我有包装输入字段的组件。在组件中，我从<span>Hello!</span>收到Control对象。在模板中，我有span，如果不需要组件中的输入字段，则显示消息。

@Input() inputControl: 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

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

鉴于自1月以来对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

有点晚了，但对我有用的是检查控件是否具有 A(key1='key1value', key2={'a': 'a'}, key3=[1, 2]) B(key1='key1value', key3=[1, 2], key4=[]) 或 validator 方法。这样你就知道控件是否有一些同步验证器或一些 asyncValidator。然后，如果您想知道调用了哪些验证器。

同步验证：

asyncValidator

异步验证：

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

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

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

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

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

3 个答案: