时间戳

首页 > 解决方案 > 了解angular4中Validation类中的静态方法

angular-reactive-forms - 了解angular4中Validation类中的静态方法

问题描述

我开始以角度学习模型驱动形式，当我浏览模型驱动形式的文档时，我发现了这个

组件.ts

 this.myForm= this.fb.group({
      'contact':['',Validators.required]
    });

现在，当我转到验证器类的定义时，我发现了这个

export declare class Validators {
...
static required(control: AbstractControl): ValidationErrors | null;
...
}

这解释了required 是验证器类中的一个静态方法，它需要一个 AbstractControl 作为参数。但是为什么我可以在不传递任何参数的情况下使用它。

标签： angular-reactive-formsangular4-formsangular-validationangular-validator

解决方案

required 方法返回一个带有“required”属性的错误映射：{'required':true}如果值为control: AbstractControl空，null如果不是。

.

从角度源代码： https ://github.com/angular/angular/blob/6.1.9/packages/forms/src/validators.ts#L133-L154

static required(control: AbstractControl): ValidationErrors|null {
    return isEmptyInputValue(control.value) ? {'required': true} : null;
  }

.

之所以可以不带括号和参数传递 Validators.required 是因为 Typescript 是 Javascript 的超集，可以将函数存储为变量：

var Foo = function (control: AbstractControl)
{
  return anyVal;
};

是相同的：

Foo(control: AbstractControl): any
{
  return anyVal;
};

所以这样做是完全有效的

var Bar = Foo;

而且因为函数只是一个保存可执行代码的变量，我们可以将函数存储在多个变量中，也可以将其作为参数传递，这就是在 FormControl 中所做的。

所以基本上，当你这样做时

const control = new FormControl('', Validators.required);

您没有执行所需的方法，因为仅在添加括号和参数时才执行方法。相反，您传递的是 Validator 函数本身。

推荐阅读