7

我有包装输入字段的组件。在组件中，我Control从@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？我想知道我是否可以像这样使用它

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

3 回答 3

6

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

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

现在模板中的代码将是：

（可选的）

希望它可以帮助你，蒂埃里

于 2016-01-18T16:47:57.870 回答
4

考虑到自 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)]]
于 2016-11-16T21:47:06.670 回答
0

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

同步验证：

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 是否存在，因为没有任何验证器的控件会由于函数不存在而引发错误。

于 2021-02-05T14:36:22.507 回答